side_bro 0.2.2

data/web/locales/en.yml

@@ -0,0 +1,88 @@
+en:
+  dashboard: "Dashboard"
+  busy: "Busy"
+  queues: "Queues"
+  retries: "Retries"
+  scheduled: "Scheduled"
+  dead: "Dead"
+  morgue: "Morgue"
+  metrics: "Metrics"
+  processed: "Processed"
+  failed: "Failed"
+  enqueued: "Enqueued"
+  workers: "Workers"
+  processes: "Processes"
+  jobs: "Jobs"
+  queue: "Queue"
+  size: "Size"
+  latency: "Latency"
+  actions: "Actions"
+  delete: "Delete"
+  clear: "Clear"
+  pause: "Pause"
+  unpause: "Unpause"
+  retry: "Retry"
+  retry_now: "Retry Now"
+  kill: "Kill"
+  retry_all: "Retry All"
+  delete_all: "Delete All"
+  kill_all: "Kill All"
+  add_to_queue: "Add to Queue"
+  add_all_to_queue: "Add All to Queue"
+  quiet: "Quiet"
+  stop: "Stop"
+  quiet_all: "Quiet All"
+  stop_all: "Stop All"
+  next_retry: "Next"
+  retry_count: "#"
+  error: "Error"
+  class: "Class"
+  args: "Args"
+  jid: "JID"
+  queue_name: "Queue"
+  enqueued_at: "Enqueued At"
+  backtrace: "Backtrace"
+  show_backtrace: "Show backtrace"
+  hostname: "Hostname"
+  pid: "PID"
+  version: "Version"
+  started_at: "Started At"
+  rss: "RSS"
+  concurrency: "Concurrency"
+  tags: "Tags"
+  run_at: "Run At"
+  run_time: "Run Time"
+  thread: "Thread"
+  scheduled_at: "Scheduled At"
+  last_retry: "Last Retry"
+  next_page: "Next"
+  prev_page: "Prev"
+  page_of: "Page %{page} of %{total}"
+  no_jobs: "No jobs"
+  no_processes: "No processes"
+  no_retries: "No retries"
+  no_scheduled: "No scheduled jobs"
+  no_dead: "No dead jobs"
+  redis_info: "Redis Info"
+  redis_version: "Version"
+  redis_uptime: "Uptime"
+  redis_clients: "Connected Clients"
+  redis_memory: "Memory Used"
+  redis_peak_memory: "Peak Memory"
+  realtime_chart: "Realtime"
+  historical_chart: "Historical"
+  days_7: "7 days"
+  days_30: "30 days"
+  days_90: "90 days"
+  days_180: "180 days"
+  poll_interval: "Poll interval (s)"
+  metrics_period: "Period"
+  success: "Success"
+  total_exec_time: "Total Exec Time"
+  avg_exec_time: "Avg Exec Time"
+  job_class: "Job Class"
+  show_all: "Show All"
+  position: "Position"
+  select_all: "Select All"
+  bulk_actions: "Bulk Actions"
+  locale: "Language"

data/web/views/_footer.html.erb

@@ -0,0 +1,3 @@
+<div style="padding: 12px 0; color: var(--text-faint); font-size: 11px; font-family: var(--mono);">
+  SideBro <%= SideBro::VERSION %> · Sidekiq <%= Sidekiq::VERSION %>
+</div>

data/web/views/_job_info.html.erb

@@ -0,0 +1,23 @@
+<table class="job-info">
+  <tr><th><%= action.t(:jid) %></th><td><%= action.h(@job["jid"]) %></td></tr>
+  <tr><th><%= action.t(:class) %></th><td><%= action.h(action.job_display_class(@job)) %></td></tr>
+  <tr><th><%= action.t(:queue) %></th><td><%= action.h(@job["queue"]) %></td></tr>
+  <tr><th><%= action.t(:args) %></th><td><code><%= action.h(action.display_args(@job)) %></code></td></tr>
+  <%- if @job["enqueued_at"] %>
+  <tr><th><%= action.t(:enqueued_at) %></th><td><%= Time.at(@job["enqueued_at"]).utc %></td></tr>
+  <%- end %>
+  <%- if @job["error_class"] %>
+  <tr><th><%= action.t(:error) %></th><td><%= action.h("#{@job["error_class"]}: #{@job["error_message"]}") %></td></tr>
+  <%- end %>
+  <%- if @job["error_backtrace"]&.any? %>
+  <tr>
+    <th><%= action.t(:backtrace) %></th>
+    <td>
+      <details>
+        <summary><%= action.t(:show_backtrace) %></summary>
+        <pre><%= action.h(@job["error_backtrace"].first(20).join("\n")) %></pre>
+      </details>
+    </td>
+  </tr>
+  <%- end %>
+</table>

data/web/views/_metrics_period_select.html.erb

@@ -0,0 +1,5 @@
+<div class="period-select">
+  <%- %w[1h 8h 24h 72h].each do |p| %>
+    <a href="?period=<%= p %>" class="<%= @period == p ? 'active' : '' %>"><%= p %></a>
+  <%- end %>
+</div>

data/web/views/_nav.html.erb

@@ -0,0 +1,76 @@
+<%
+  begin
+    _stats = Sidekiq::Stats.new
+    _busy = _stats.workers_size
+    _queues_count = Sidekiq::Queue.all.size
+    _retries = _stats.retry_size
+    _scheduled = _stats.scheduled_size
+    _dead = _stats.dead_size
+  rescue
+    _busy = _queues_count = _retries = _scheduled = _dead = 0
+  end
+%>
+<aside class="sidebar">
+  <div class="brand">
+    <div class="brand-mark"></div>
+    <div>
+      <div class="brand-name">Side<span>Bro</span></div>
+    </div>
+    <div class="brand-pill">live</div>
+  </div>
+
+  <div class="nav-label">Overview</div>
+  <nav class="nav">
+    <a href="<%= action.root_path %>" class="<%= action.current_path?('') ? 'active' : '' %>">
+      <span class="dot"></span> Dashboard <span class="count">—</span>
+    </a>
+  </nav>
+
+  <div class="nav-label">Workers</div>
+  <nav class="nav">
+    <a href="<%= action.root_path %>busy" class="<%= action.current_path?('busy') ? 'active' : '' %>">
+      <span class="dot"></span> Busy <span class="count"><%= _busy %></span>
+    </a>
+    <a href="<%= action.root_path %>queues" class="<%= action.request.path.include?('/queues') ? 'active' : '' %>">
+      <span class="dot"></span> Queues <span class="count"><%= _queues_count %></span>
+    </a>
+  </nav>
+
+  <div class="nav-label">Lifecycle</div>
+  <nav class="nav">
+    <a href="<%= action.root_path %>retries" class="<%= action.request.path.include?('/retries') ? 'active' : '' %>">
+      <span class="dot"></span> Retries <span class="count"><%= _retries %></span>
+    </a>
+    <a href="<%= action.root_path %>scheduled" class="<%= action.request.path.include?('/scheduled') ? 'active' : '' %>">
+      <span class="dot"></span> Scheduled <span class="count"><%= _scheduled %></span>
+    </a>
+    <a href="<%= action.root_path %>morgue" class="<%= action.request.path.include?('/morgue') ? 'active' : '' %>">
+      <span class="dot"></span> Dead <span class="count"><%= _dead %></span>
+    </a>
+  </nav>
+
+  <div class="nav-label">Monitoring</div>
+  <nav class="nav">
+    <a href="<%= action.root_path %>metrics" class="<%= action.current_path?('metrics') ? 'active' : '' %>">
+      <span class="dot"></span> Metrics <span class="count">—</span>
+    </a>
+  </nav>
+
+  <%- SideBro::Web.extensions.each do |ext| %>
+    <%- next unless ext[:tab] %>
+    <div class="nav-label"><%= action.h(ext[:tab]) %></div>
+    <nav class="nav">
+      <a href="<%= action.root_path %><%= action.h(ext[:name]) %>">
+        <span class="dot"></span> <%= action.h(ext[:tab]) %>
+      </a>
+    </nav>
+  <%- end %>
+
+  <div class="sidebar-footer">
+    <div class="avatar">SB</div>
+    <div class="who">
+      sidebro · v<%= SideBro::VERSION %>
+      <small>sidekiq <%= Sidekiq::VERSION %></small>
+    </div>
+  </div>
+</aside>

data/web/views/_paging.html.erb

@@ -0,0 +1,11 @@
+<%- if @total && @total > 0 %>
+  <div class="paging">
+    <%- if @page > 0 %>
+      <a href="?<%= action.query_string("page" => @page, "per_page" => @per_page) %>">&laquo; <%= action.t(:prev_page) %></a>
+    <%- end %>
+    <span><%= action.t(:page_of, page: @page + 1, total: [(@total.to_f / @per_page).ceil, 1].max) %></span>
+    <%- if (@page + 1) * @per_page < @total %>
+      <a href="?<%= action.query_string("page" => @page + 2, "per_page" => @per_page) %>"><%= action.t(:next_page) %> &raquo;</a>
+    <%- end %>
+  </div>
+<%- end %>

data/web/views/_poll_link.html.erb

@@ -0,0 +1,4 @@
+<div class="poll-link">
+  <input type="range" id="poll-interval" min="2" max="20" value="5">
+  <label for="poll-interval"><%= action.t(:poll_interval) %></label>
+</div>

data/web/views/_summary.html.erb

@@ -0,0 +1,44 @@
+<%
+  begin
+    _s = Sidekiq::Stats.new
+  rescue
+    _s = nil
+  end
+%>
+<div class="stat-strip">
+  <div class="stat" data-tone="processed">
+    <div class="stat-label">Processed</div>
+    <div class="stat-value"><%= action.number_with_delimiter(_s&.processed || 0) %></div>
+    <div class="stat-delta">total</div>
+  </div>
+  <div class="stat" data-tone="failed">
+    <div class="stat-label"><span class="dot-mini" style="background:var(--red);box-shadow:0 0 6px var(--red)"></span> Failed</div>
+    <div class="stat-value"><%= action.number_with_delimiter(_s&.failed || 0) %></div>
+    <div class="stat-delta"><%= _s && _s.processed > 0 ? "%.2f%% rate" % (_s.failed.to_f / _s.processed * 100) : "—" %></div>
+  </div>
+  <a class="stat" data-tone="busy" href="<%= action.root_path %>busy">
+    <div class="stat-label"><span class="dot-mini" style="background:var(--cyan);box-shadow:0 0 6px var(--cyan)"></span> Busy</div>
+    <div class="stat-value"><%= _s&.workers_size || 0 %></div>
+    <div class="stat-delta">workers</div>
+  </a>
+  <a class="stat" data-tone="enqueued" href="<%= action.root_path %>queues">
+    <div class="stat-label"><span class="dot-mini" style="background:var(--violet-300)"></span> Enqueued</div>
+    <div class="stat-value"><%= action.number_with_delimiter(_s&.enqueued || 0) %></div>
+    <div class="stat-delta">pending</div>
+  </a>
+  <a class="stat" data-tone="retries" href="<%= action.root_path %>retries">
+    <div class="stat-label"><span class="dot-mini" style="background:var(--amber)"></span> Retries</div>
+    <div class="stat-value"><%= _s&.retry_size || 0 %></div>
+    <div class="stat-delta">scheduled</div>
+  </a>
+  <a class="stat" data-tone="scheduled" href="<%= action.root_path %>scheduled">
+    <div class="stat-label">Scheduled</div>
+    <div class="stat-value"><%= _s&.scheduled_size || 0 %></div>
+    <div class="stat-delta">upcoming</div>
+  </a>
+  <div class="stat" data-tone="dead">
+    <div class="stat-label">Dead</div>
+    <div class="stat-value"><%= _s&.dead_size || 0 %></div>
+    <div class="stat-delta">morgue</div>
+  </div>
+</div>

data/web/views/busy.html.erb

@@ -0,0 +1,104 @@
+<% @page_title = "Busy" %>
+
+<div class="page-head">
+  <div class="page-title-block">
+    <div class="eyebrow"><span>Workers</span></div>
+    <h1><%= action.t(:busy) %></h1>
+  </div>
+</div>
+
+<div class="panel">
+  <div class="panel-head">
+    <div class="ph-title"><%= action.t(:processes) %></div>
+    <div class="ph-meta mono"><%= @processes.size %> processes</div>
+    <div class="ph-spacer"></div>
+    <%- unless @processes.empty? %>
+      <form method="post" action="<%= action.root_path %>busy" style="display:inline; display:flex; gap:8px;">
+        <button type="submit" name="quiet" value="1" class="btn ghost"><%= action.t(:quiet_all) %></button>
+        <button type="submit" name="stop" value="1" class="btn danger"><%= action.t(:stop_all) %></button>
+      </form>
+    <%- end %>
+  </div>
+  <%- if @processes.empty? %>
+    <div class="empty"><%= action.t(:no_processes) %></div>
+  <%- else %>
+    <div class="table-scroll">
+    <table>
+      <thead>
+        <tr>
+          <th><%= action.t(:hostname) %></th>
+          <th><%= action.t(:queues) %></th>
+          <th><%= action.t(:started_at) %></th>
+          <th><%= action.t(:rss) %></th>
+          <th><%= action.t(:concurrency) %></th>
+          <th><%= action.t(:busy) %></th>
+          <th class="col-actions"><%= action.t(:actions) %></th>
+        </tr>
+      </thead>
+      <tbody>
+        <%- @processes.each do |process| %>
+          <tr>
+            <td><span class="mono" style="font-size:12px"><%= action.h(process["hostname"]) %>:<%= action.h(process["pid"].to_s) %></span></td>
+            <td><%= action.h(Array(process["queues"]).join(", ")) %></td>
+            <td><span class="mono" style="font-size:12px"><%= process["started_at"] ? Time.at(process["started_at"]).utc.strftime("%Y-%m-%d %H:%M") : "—" %></span></td>
+            <td><%= action.format_memory(process["rss"]) %></td>
+            <td><%= process["concurrency"] %></td>
+            <td><span style="color:var(--cyan)"><%= process["busy"] %></span> / <%= process["concurrency"] %></td>
+            <td class="col-actions">
+              <form method="post" action="<%= action.root_path %>busy" style="display:inline-flex; gap:4px;">
+                <input type="hidden" name="identity" value="<%= action.h(process.identity) %>">
+                <button type="submit" name="quiet_process" value="1" class="iconlink" title="<%= action.t(:quiet) %>">
+                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="1" y1="1" x2="23" y2="23"/><path d="M9 9v3a3 3 0 0 0 5.12 2.12M15 9.34V4a3 3 0 0 0-5.94-.6"/><path d="M17 16.95A7 7 0 0 1 5 12v-2m14 0v2a7 7 0 0 1-.11 1.23M12 20l-3.3.3M12 20l3.3.3M12 20v4"/></svg>
+                </button>
+                <button type="submit" name="stop_process" value="1" class="iconlink danger" title="<%= action.t(:stop) %>">
+                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/></svg>
+                </button>
+              </form>
+            </td>
+          </tr>
+        <%- end %>
+      </tbody>
+    </table>
+    </div>
+  <%- end %>
+</div>
+
+<div class="panel">
+  <div class="panel-head">
+    <div class="ph-title"><%= action.t(:jobs) %></div>
+    <div class="ph-meta mono"><%= @workers.size %> running</div>
+  </div>
+  <%- if @workers.empty? %>
+    <div class="empty"><%= action.t(:no_jobs) %></div>
+  <%- else %>
+    <div class="table-scroll">
+    <table>
+      <thead>
+        <tr>
+          <th><%= action.t(:hostname) %></th>
+          <th><%= action.t(:thread) %></th>
+          <th><%= action.t(:jid) %></th>
+          <th><%= action.t(:queue) %></th>
+          <th><%= action.t(:class) %></th>
+          <th><%= action.t(:args) %></th>
+          <th><%= action.t(:run_at) %></th>
+        </tr>
+      </thead>
+      <tbody>
+        <%- @workers.each do |process, thread, work| %>
+          <%- job = work.is_a?(Hash) ? work : (work.respond_to?(:job) ? work.job : work) %>
+          <tr>
+            <td><span class="mono" style="font-size:12px"><%= action.h(process.to_s) %></span></td>
+            <td><span class="mono" style="font-size:12px"><%= action.h(thread.to_s) %></span></td>
+            <td><span class="mono" style="font-size:12px; color:var(--violet-200)"><%= action.h(job["jid"].to_s) %></span></td>
+            <td><%= action.h(job["queue"].to_s) %></td>
+            <td><span class="job-name"><%= action.h(action.job_display_class(job)) %></span></td>
+            <td><code class="args" style="font-size:11px"><%= action.h(action.format_args_short(job)) %></code></td>
+            <td><span class="mono" style="font-size:12px"><%= job["run_at"] ? action.relative_time(Time.at(job["run_at"].to_f)) : "—" %></span></td>
+          </tr>
+        <%- end %>
+      </tbody>
+    </table>
+    </div>
+  <%- end %>
+</div>

data/web/views/dashboard.html.erb

@@ -0,0 +1,124 @@
+<% @page_title = "Dashboard" %>
+<%= action.render_partial(:summary) %>
+<%
+  redis_info = begin
+    Sidekiq.redis { |c| c.info }
+  rescue
+    {}
+  end
+%>
+
+<div class="page-head">
+  <div class="page-title-block">
+    <div class="eyebrow">
+      <span>Real-time</span>
+      <span class="pill" id="pollPill">5s POLL</span>
+    </div>
+    <h1>
+      <span class="queue-name">Dashboard</span>
+      <span class="badge-num" id="liveBadge" style="background:rgba(164,255,92,.12);border-color:rgba(164,255,92,.3);color:var(--lime)"><span class="mono">●</span> live</span>
+    </h1>
+  </div>
+  <div class="page-head-meta">
+    <div class="meta-item" style="min-width:240px">
+      <span class="meta-k">Polling interval</span>
+      <div style="display:flex; align-items:center; gap:10px; width:100%;">
+        <input type="range" id="pollSlider" min="1" max="30" value="5" class="poll-slider"/>
+        <span class="meta-v" style="min-width:46px;text-align:right;color:var(--violet-200)" id="pollValue">5 sec</span>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- Realtime chart panel -->
+<div class="panel">
+  <div class="panel-head">
+    <div class="ph-title">Throughput · last <span id="chartWindow">60s</span></div>
+    <div class="ph-meta"><span id="chartTime"></span></div>
+    <div class="ph-spacer"></div>
+    <div style="display:flex; align-items:center; gap:14px; font-size:12px; color:var(--text-dim);">
+      <span style="display:inline-flex; align-items:center; gap:6px"><span class="legend-dot" style="background:var(--cyan); box-shadow:0 0 6px var(--cyan)"></span>Processed</span>
+      <span style="display:inline-flex; align-items:center; gap:6px"><span class="legend-dot" style="background:var(--red); box-shadow:0 0 6px var(--red)"></span>Failed</span>
+    </div>
+  </div>
+  <div class="chart-wrap">
+    <svg id="liveChart" viewBox="0 0 1200 280" preserveAspectRatio="none"></svg>
+    <div class="chart-tooltip" id="chartTip">
+      <div class="tip-time" id="tipTime"></div>
+      <div class="tip-row"><span class="legend-dot" style="background:var(--cyan)"></span>Processed: <b id="tipProc">0</b></div>
+      <div class="tip-row"><span class="legend-dot" style="background:var(--red)"></span>Failed: <b id="tipFail">0</b></div>
+    </div>
+  </div>
+</div>
+
+<!-- History panel -->
+<div class="panel">
+  <div class="panel-head">
+    <div class="ph-title">History</div>
+    <div class="ph-meta">Total processed over selected period</div>
+    <div class="ph-spacer"></div>
+    <div class="filter-group" id="historyTabs" style="gap:4px">
+      <button class="chip" data-range="week">1 week</button>
+      <button class="chip active" data-range="month">1 month</button>
+      <button class="chip" data-range="3m">3 months</button>
+      <button class="chip" data-range="6m">6 months</button>
+    </div>
+  </div>
+  <div class="chart-wrap" style="padding: 24px 28px 28px;">
+    <svg id="historyChart" viewBox="0 0 1200 320" preserveAspectRatio="none"></svg>
+  </div>
+</div>
+
+<!-- Redis panel -->
+<div class="panel">
+  <div class="panel-head">
+    <div class="ph-title">Redis</div>
+    <div class="ph-meta"><%= action.h(redis_info["redis_version"] ? "v#{redis_info["redis_version"]} · " : "") %>connected</div>
+    <div class="ph-spacer"></div>
+    <span class="ctx-pill" style="color:var(--lime); border-color:rgba(164,255,92,.3); background:rgba(164,255,92,.06)">
+      <span class="ctx-dot" style="background:var(--lime); box-shadow:0 0 6px var(--lime)"></span>healthy
+    </span>
+  </div>
+  <div class="redis-grid">
+    <div class="redis-card" data-tone="violet">
+      <div class="redis-num"><%= action.h(redis_info["redis_version"] || "—") %></div>
+      <div class="redis-label">Version</div>
+      <div class="redis-foot">stable channel</div>
+    </div>
+    <div class="redis-card" data-tone="cyan">
+      <div class="redis-num"><%= action.h(redis_info["uptime_in_days"] || "—") %></div>
+      <div class="redis-label">Uptime <small>(days)</small></div>
+      <div class="redis-foot">&nbsp;</div>
+    </div>
+    <div class="redis-card" data-tone="magenta">
+      <div class="redis-num"><%= action.h(redis_info["connected_clients"] || "—") %></div>
+      <div class="redis-label">Connections</div>
+      <div class="redis-foot">&nbsp;</div>
+    </div>
+    <%
+      _used_bytes = redis_info["used_memory"].to_i
+      _peak_bytes = redis_info["used_memory_peak"].to_i
+      _mem_pct    = (_peak_bytes > 0 ? [(_used_bytes * 100.0 / _peak_bytes).round, 100].min : 0)
+    %>
+    <div class="redis-card" data-tone="amber">
+      <div class="redis-num"><%= action.h(redis_info["used_memory_human"] || "—") %></div>
+      <div class="redis-label">Memory Usage</div>
+      <div class="redis-bar"><i style="width:<%= _mem_pct %>%; background:var(--amber)"></i></div>
+    </div>
+    <div class="redis-card" data-tone="red">
+      <div class="redis-num"><%= action.h(redis_info["used_memory_peak_human"] || "—") %></div>
+      <div class="redis-label">Peak Memory</div>
+      <div class="redis-foot">&nbsp;</div>
+    </div>
+  </div>
+</div>
+
+<script nonce="<%= nonce %>">
+window.HISTORY_DATA = {
+  processed: <%= @history.processed.values.reverse.to_json %>,
+  failed: <%= @history.failed.values.reverse.to_json %>,
+  labels: <%= @history.processed.keys.reverse.to_json %>
+};
+window.SIDE_BRO_ROOT = '<%= action.root_path %>';
+</script>
+<script src="<%= action.root_path %>assets/javascripts/dashboard.js" nonce="<%= nonce %>"></script>

data/web/views/dead.html.erb

@@ -0,0 +1,31 @@
+<% @page_title = "Dead: #{action.job_display_class(@job)}" %>
+<% @breadcrumb = [{label: "Dead", href: "#{action.root_path}morgue"}, {label: action.job_display_class(@job)}] %>
+
+<div class="page-head">
+  <div class="page-title-block">
+    <div class="eyebrow"><span>Lifecycle</span></div>
+    <h1><span class="queue-name"><%= action.h(action.job_display_class(@job)) %></span></h1>
+  </div>
+  <div class="page-head-meta">
+    <form method="post" action="<%= action.root_path %>morgue" style="display:inline-flex; gap:8px;">
+      <input type="hidden" name="key[]" value="<%= action.h(@job.jid) %>">
+      <button type="submit" name="action" value="retry" class="btn ghost">
+        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="23 4 23 10 17 10"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/></svg>
+        <%= action.t(:retry_now) %>
+      </button>
+      <button type="submit" name="action" value="delete" class="btn danger">
+        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/></svg>
+        <%= action.t(:delete) %>
+      </button>
+    </form>
+  </div>
+</div>
+
+<div class="panel">
+  <div class="panel-head">
+    <div class="ph-title">Job Details</div>
+  </div>
+  <div style="padding: 20px 16px;">
+    <%= action.render_partial(:job_info) %>
+  </div>
+</div>

data/web/views/layout.html.erb

@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="<%= action.locale %>" dir="<%= action.rtl? ? 'rtl' : 'ltr' %>">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <title>SideBro<%= @page_title ? " — #{@page_title}" : "" %></title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="<%= action.root_path %>assets/stylesheets/style.css" nonce="<%= nonce %>">
+</head>
+<body>
+<div class="app">
+
+  <%= action.render_partial(:nav) %>
+
+  <main class="main">
+    <div class="topbar">
+      <div class="breadcrumb">
+        <%- if @breadcrumb && @breadcrumb.length > 1 %>
+          <%- @breadcrumb[0..-2].each do |item| %>
+            <span><%= action.h(item[:label]) %></span>
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 6 15 12 9 18"/></svg>
+          <%- end %>
+          <b><%= action.h(@breadcrumb.last[:label]) %></b>
+        <%- elsif @breadcrumb %>
+          <b><%= action.h(@breadcrumb.last[:label]) %></b>
+        <%- else %>
+          <b><%= action.h(@page_title || "Dashboard") %></b>
+        <%- end %>
+      </div>
+      <div class="topbar-actions">
+        <button class="live-toggle" id="liveToggle">
+          <span class="pulse"></span>
+          <span>Live · <span class="mono" id="liveInterval">5s</span></span>
+        </button>
+        <button class="icon-btn" title="Refresh" id="refreshBtn">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/></svg>
+        </button>
+      </div>
+    </div>
+
+    <%- if action.flash.any? %>
+      <div class="flash-bar">
+        <%- %w[notice error].each do |_level| %>
+          <%- if (msg = action.flash[_level]) %>
+            <div class="flash flash-<%= _level %>"><%= action.h(msg) %></div>
+          <%- end %>
+        <%- end %>
+      </div>
+    <%- end %>
+
+    <%= content %>
+
+    <%= action.render_partial(:footer) %>
+  </main>
+
+</div>
+<script src="<%= action.root_path %>assets/javascripts/application.js" nonce="<%= nonce %>"></script>
+</body>
+</html>

data/web/views/metrics.html.erb

@@ -0,0 +1,56 @@
+<% @page_title = "Metrics" %>
+
+<div class="page-head">
+  <div class="page-title-block">
+    <div class="eyebrow"><span>Monitoring</span></div>
+    <h1><%= action.t(:metrics) %></h1>
+  </div>
+  <div class="page-head-meta">
+    <%= action.render_partial(:metrics_period_select) %>
+  </div>
+</div>
+
+<%- if !action.metrics_enabled? %>
+  <div class="panel">
+    <div class="empty">Metrics require Sidekiq 7.0 or later.</div>
+  </div>
+<%- elsif @metrics.nil? || @metrics.job_results.empty? %>
+  <div class="panel">
+    <div class="empty"><%= action.t(:no_jobs) %></div>
+  </div>
+<%- else %>
+  <div class="panel">
+    <div class="panel-head">
+      <div class="ph-title">Job Metrics</div>
+      <div class="ph-meta mono">Period: <%= @period %></div>
+    </div>
+    <table>
+      <thead>
+        <tr>
+          <th><%= action.t(:job_class) %></th>
+          <th><%= action.t(:success) %></th>
+          <th><%= action.t(:failed) %></th>
+          <th><%= action.t(:total_exec_time) %></th>
+          <th><%= action.t(:avg_exec_time) %></th>
+        </tr>
+      </thead>
+      <tbody>
+        <%- @metrics.job_results.first(20).each do |klass, result| %>
+          <%- processed = result.totals["p"].to_i %>
+          <%- failures  = result.totals["f"].to_i %>
+          <%- success   = processed - failures %>
+          <%- total_s   = result.totals["s"].to_f %>
+          <%- completed = [success, 0].max %>
+          <%- avg_s     = completed > 0 ? total_s / completed : 0.0 %>
+          <tr>
+            <td><a href="<%= action.root_path %>metrics/<%= action.h(klass) %>"><span class="job-name"><%= action.h(klass) %></span></a></td>
+            <td><span style="color:var(--lime)"><%= success %></span></td>
+            <td><span style="color:var(--red)"><%= failures %></span></td>
+            <td><span class="mono" style="font-size:12px"><%= "%.2fs" % total_s %></span></td>
+            <td><span class="mono" style="font-size:12px"><%= "%.3fs" % avg_s %></span></td>
+          </tr>
+        <%- end %>
+      </tbody>
+    </table>
+  </div>
+<%- end %>