side_bro 0.2.2

data/lib/side_bro/web/helpers.rb

@@ -0,0 +1,176 @@
+# frozen_string_literal: true
+
+require "json"
+require "cgi"
+
+module SideBro
+  module WebHelpers
+    QUEUE_NAME_RE = /\A[a-z_:.\-0-9]+\z/i
+
+    # Builds a query string from current request params merged with overrides.
+    # Pass nil as a value to remove that key from the result.
+    def query_string(overrides = {})
+      overrides = overrides.transform_keys(&:to_s)
+      base = request.params.reject { |k, _| overrides.key?(k.to_s) }
+      merged = base.merge(overrides.compact)
+      merged.map { |k, v| "#{CGI.escape(k.to_s)}=#{CGI.escape(v.to_s)}" }.join("&")
+    end
+
+    def validate_queue_name!(name)
+      halt(404) unless name&.match?(QUEUE_NAME_RE)
+    end
+
+    def current_path?(path)
+      request.path == "#{root_path}#{path}".chomp("/")
+    end
+
+    def root_path
+      # Strips trailing slash from SCRIPT_NAME so prefix is always clean
+      script = request.env["SCRIPT_NAME"] || ""
+      script.end_with?("/") ? script : "#{script}/"
+    end
+
+    def locale
+      session[:locale] || "en"
+    end
+
+    def t(key, **opts)
+      str = SideBro::Web.translations.dig(locale.to_s, key.to_s) ||
+        SideBro::Web.translations.dig("en", key.to_s) ||
+        key.to_s
+      return str if opts.empty?
+      begin
+        str % opts
+      rescue
+        str
+      end
+    end
+
+    def relative_time(time)
+      return "" unless time
+      secs = (Time.now - time).to_i.abs
+      if secs < 60 then "#{secs}s"
+      elsif secs < 3600 then "#{secs / 60}m"
+      elsif secs < 86400 then "#{secs / 3600}h"
+      else "#{secs / 86400}d"
+      end
+    end
+
+    def format_memory(kb)
+      return "–" unless kb
+      mb = kb / 1024.0
+      mb >= 1024 ? "%.1f GB" % (mb / 1024.0) : "%.0f MB" % mb
+    end
+
+    def truncate(str, len = 200)
+      return str if str.nil? || str.length <= len
+      "#{str[0, len]}…"
+    end
+
+    ACTIVEJOB_WRAPPER = "ActiveJob::QueueAdapters::SidekiqAdapter::JobWrapper"
+
+    def job_display_class(job_hash)
+      return job_hash["class"] unless job_hash["class"] == ACTIVEJOB_WRAPPER
+      inner = (job_hash["args"] || []).first
+      inner.is_a?(Hash) ? (inner["job_class"] || ACTIVEJOB_WRAPPER) : ACTIVEJOB_WRAPPER
+    end
+
+    def raw_args(job_hash)
+      if job_hash["class"] == ACTIVEJOB_WRAPPER
+        inner = (job_hash["args"] || []).first
+        inner.is_a?(Hash) ? clean_aj_args(inner["arguments"] || []) : []
+      else
+        job_hash["args"] || []
+      end
+    end
+
+    def display_args(job_hash)
+      truncate(JSON.generate(raw_args(job_hash)))
+    rescue
+      "–"
+    end
+
+    def format_args_short(job_hash, per_row: 2)
+      raw = raw_args(job_hash)
+      if raw.length == 1 && raw.first.is_a?(Hash)
+        pairs = raw.first.map { |k, v|
+          val = v.is_a?(String) ? v : JSON.generate(v)
+          "#{k}: #{truncate(val, 20)}"
+        }
+        pairs.each_slice(per_row).map { |s| s.join("   ") }.join("\n")
+      else
+        truncate(JSON.generate(raw), 60)
+      end
+    rescue
+      "–"
+    end
+
+    def clean_aj_args(obj)
+      case obj
+      when Array then obj.map { |v| clean_aj_args(v) }
+      when Hash
+        cleaned = obj.reject { |k, _| k.to_s.start_with?("_aj_") }
+          .transform_values { |v| clean_aj_args(v) }
+        cleaned.size == 1 ? cleaned.values.first : cleaned
+      else obj
+      end
+    end
+
+    def paginate(set, page, per_page = 25)
+      total = set.size
+      items = set.map { |j| j }.slice(page * per_page, per_page) || []
+      [items, total]
+    end
+
+    def current_page
+      page = [(params["page"] || 1).to_i - 1, 0].max
+      per_page = (params["per_page"] || 25).to_i.clamp(1, 250)
+      [page, per_page]
+    end
+
+    def page_slice
+      page, per_page = current_page
+      [page * per_page, per_page]
+    end
+
+    def rtl?
+      %w[ar fa he ur].include?(locale)
+    end
+
+    def h(text)
+      text.to_s
+        .gsub("&", "&amp;")
+        .gsub("<", "&lt;")
+        .gsub(">", "&gt;")
+        .gsub('"', "&quot;")
+        .gsub("'", "&#39;")
+    end
+
+    def csrf_token
+      session[:csrf] ||= SecureRandom.hex(16)
+    end
+
+    def number_with_delimiter(n)
+      n.to_s.reverse.gsub(/(\d{3})(?=\d)/, "\\1,").reverse
+    end
+
+    def metrics_enabled?
+      Gem::Version.new(Sidekiq::VERSION) >= Gem::Version.new("7.0")
+    end
+
+    def handle_job_action(set)
+      action_name = params["action"]
+      keys = Array(params["key"])
+      keys.each do |jid|
+        job = set.find { |j| j.jid == jid }
+        next unless job
+        case action_name
+        when "retry" then job.retry
+        when "delete" then job.delete
+        when "kill" then job.kill if job.respond_to?(:kill)
+        when "add_to_queue" then job.add_to_queue if job.respond_to?(:add_to_queue)
+        end
+      end
+    end
+  end
+end

data/lib/side_bro/web/router.rb

@@ -0,0 +1,50 @@
+# frozen_string_literal: true
+
+module SideBro
+  class Web
+    class Router
+      ROUTE_PARAMS = "rack.route_params"
+
+      def initialize
+        @routes = Hash.new { |h, k| h[k] = [] }
+      end
+
+      def add(method, path, &block)
+        pattern, keys = compile(path)
+        @routes[method.upcase] << [pattern, keys, block]
+      end
+
+      def get(path, &block) = add("GET", path, &block)
+      def post(path, &block) = add("POST", path, &block)
+      def head(path, &block) = add("HEAD", path, &block)
+
+      def match(env)
+        method = env["REQUEST_METHOD"]
+        path = env["PATH_INFO"]
+
+        routes_for(method).each do |pattern, keys, block|
+          next unless (m = pattern.match(path))
+          env[ROUTE_PARAMS] = keys.each_with_object({}) { |k, h| h[k] = m[k] }
+          return block
+        end
+        nil
+      end
+
+      private
+
+      def routes_for(method)
+        list = @routes[method] || []
+        # HEAD falls back to GET routes
+        (method == "HEAD") ? list + (@routes["GET"] || []) : list
+      end
+
+      def compile(path)
+        keys = []
+        pattern = path
+          .gsub(%r{/\*}) { keys << "splat"; "(?<splat>.*)" }
+          .gsub(%r{/:([^/]+)}) { keys << $1; "/(?<#{$1}>[^$/]+)" }
+        [Regexp.new("\\A#{pattern}\\z"), keys]
+      end
+    end
+  end
+end

data/lib/side_bro/web.rb

@@ -0,0 +1,96 @@
+# frozen_string_literal: true
+
+require "rack"
+require "rack/session"
+require "securerandom"
+require "yaml"
+
+require_relative "web/router"
+require_relative "web/helpers"
+require_relative "web/action"
+require_relative "web/application"
+
+module SideBro
+  class Web
+    ASSETS_PATH = File.expand_path("../../web/assets", __dir__)
+
+    @middlewares = []
+    @translations = {}
+
+    class << self
+      attr_reader :translations
+
+      def call(env)
+        @inst ||= build
+        @inst.call(env)
+      end
+
+      def use(middleware, *args, &block)
+        @middlewares << [middleware, args, block]
+        @inst = nil  # reset cached instance
+      end
+
+      def reset!
+        @inst = nil
+      end
+
+      def register_extension(extclass, name:, tab: nil, index: nil, root_dir: nil, asset_paths: nil, cache_for: 86400)
+        @extensions ||= []
+        @extensions << {
+          class: extclass,
+          name: name,
+          tab: tab,
+          index: index,
+          root_dir: root_dir,
+          asset_paths: asset_paths,
+          cache_for: cache_for
+        }
+        @inst = nil  # reset cached instance
+      end
+
+      def extensions
+        @extensions || []
+      end
+
+      def load_locale(path)
+        data = YAML.safe_load_file(path, permitted_classes: [])
+        data.each do |lang, keys|
+          @translations[lang.to_s] ||= {}
+          @translations[lang.to_s].merge!(keys || {})
+        end
+      end
+
+      private
+
+      def build
+        unless ENV.key?("SIDE_BRO_SESSION_SECRET")
+          warn "[SideBro] SIDE_BRO_SESSION_SECRET is not set — sessions will reset on every server restart."
+        end
+
+        SideBro::Web.extensions.each do |ext|
+          next unless ext[:root_dir]
+          Dir["#{ext[:root_dir]}/locales/*.yml"].each { |f| SideBro::Web.load_locale(f) }
+        end
+
+        middlewares = @middlewares.dup
+        Rack::Builder.new do
+          use Rack::Session::Cookie,
+            key: "_side_bro_session",
+            same_site: :strict,
+            secret: ENV.fetch("SIDE_BRO_SESSION_SECRET") { SecureRandom.hex(32) }
+
+          middlewares.each do |(mw, args, blk)|
+            blk ? use(mw, *args, &blk) : use(mw, *args)
+          end
+
+          run SideBro::Web::Application.new
+        end
+      end
+    end
+  end
+end
+
+# Load built-in locale files
+Dir[File.expand_path("../../web/locales/*.yml", __dir__)].each do |f|
+  SideBro::Web.load_locale(f)
+end

data/lib/side_bro.rb

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+require_relative "side_bro/version"
+require_relative "side_bro/web"
+
+module SideBro
+  class Error < StandardError; end
+end

data/sig/side_bro.rbs

@@ -0,0 +1,4 @@
+module SideBro
+  VERSION: String
+  # See the writing guide of rbs: https://github.com/ruby/rbs#guides
+end

data/web/assets/javascripts/application.js

@@ -0,0 +1,62 @@
+// SideBro — main application JS
+(function () {
+  // Refresh button
+  var refreshBtn = document.getElementById("refreshBtn");
+  if (refreshBtn) {
+    refreshBtn.addEventListener("click", function () { window.location.reload(); });
+  }
+
+  // Bulk checkbox select-all
+  var selectAll = document.getElementById("select-all");
+  if (selectAll) {
+    selectAll.addEventListener("change", function () {
+      document.querySelectorAll('input[name="key[]"]').forEach(function (cb) {
+        cb.checked = selectAll.checked;
+      });
+    });
+  }
+
+  // Live toggle — owns button state; drives page auto-refresh on non-dashboard pages.
+  // Dashboard overrides behaviour by setting window.SideBroLive.onToggle.
+  var liveToggle = document.getElementById("liveToggle");
+  var intervalSec = 5;
+  var isLive = true;
+  var onDashboard = !!document.getElementById("pollSlider");
+
+  function updateLabel() {
+    var span = liveToggle && liveToggle.querySelector("span:last-child");
+    if (!span) return;
+    if (!isLive) { span.textContent = "Paused"; return; }
+    if (onDashboard) {
+      span.innerHTML = "Live · <span class=\"mono\" id=\"liveInterval\">" + intervalSec + "s</span>";
+    } else {
+      span.textContent = "Live";
+    }
+  }
+
+  updateLabel();
+
+  if (liveToggle) {
+    liveToggle.addEventListener("click", function () {
+      liveToggle.classList.toggle("off");
+      isLive = !liveToggle.classList.contains("off");
+      updateLabel();
+      if (window.SideBroLive && window.SideBroLive.onToggle) {
+        window.SideBroLive.onToggle(isLive);
+      }
+    });
+  }
+
+  // Exposed API for dashboard.js to sync interval display and pause/resume polling
+  window.SideBroLive = {
+    onToggle: null,
+    setInterval: function (sec) {
+      intervalSec = sec;
+      var el = document.getElementById("liveInterval");
+      if (el) el.textContent = sec + "s";
+      var pill = document.getElementById("pollPill");
+      if (pill) pill.textContent = sec + "s POLL";
+    },
+    getIsLive: function () { return isLive; }
+  };
+})();

data/web/assets/javascripts/base-charts.js

@@ -0,0 +1 @@
+// Base chart utilities

data/web/assets/javascripts/dashboard-charts.js

@@ -0,0 +1 @@
+// Dashboard charts

data/web/assets/javascripts/dashboard.js

@@ -0,0 +1,262 @@
+// SideBro Dashboard — SVG charts + live polling
+(function () {
+  var pollSlider = document.getElementById("pollSlider");
+  var pollValue = document.getElementById("pollValue");
+  var liveInterval = document.getElementById("liveInterval");
+  var pollPill = document.getElementById("pollPill");
+  var liveToggle = document.getElementById("liveToggle");
+  var pollTimer = null;
+  var isLive = true;
+
+  function getInterval() {
+    return pollSlider ? parseInt(pollSlider.value, 10) : 5;
+  }
+
+  if (pollSlider) {
+    pollSlider.addEventListener("input", function (e) {
+      var v = parseInt(e.target.value, 10);
+      if (pollValue) pollValue.textContent = v + " sec";
+      if (window.SideBroLive) window.SideBroLive.setInterval(v);
+      liveInterval = document.getElementById("liveInterval");
+      restartTimer();
+    });
+  }
+
+  // application.js owns the toggle button; we hook in via SideBroLive.onToggle
+  if (window.SideBroLive) {
+    window.SideBroLive.onToggle = function (live) {
+      isLive = live;
+      if (!isLive) {
+        if (pollTimer) { clearInterval(pollTimer); pollTimer = null; }
+      } else {
+        liveInterval = document.getElementById("liveInterval");
+        restartTimer();
+      }
+    };
+  }
+
+  var N = 60;
+  var seriesProcessed = new Array(N).fill(0);
+  var seriesFailed = new Array(N).fill(0);
+  var prevProcessed = null;
+  var prevFailed = null;
+
+  // ---- live chart ----
+  function renderLiveChart() {
+    var svg = document.getElementById("liveChart");
+    if (!svg) return;
+    var W = 1200, H = 280, PAD_L = 54, PAD_R = 20, PAD_T = 18, PAD_B = 28;
+    var cw = W - PAD_L - PAD_R, ch = H - PAD_T - PAD_B;
+    var interval = getInterval();
+    var totalSec = (N - 1) * interval;
+    var chartWindow = document.getElementById("chartWindow");
+    if (chartWindow) chartWindow.textContent = totalSec >= 60 ? Math.round(totalSec / 60) + " min" : totalSec + "s";
+    var all = seriesProcessed.concat(seriesFailed);
+    var maxY = Math.max(12, Math.ceil(Math.max.apply(null, all)));
+    var x = function (i) { return PAD_L + (i / (N - 1)) * cw; };
+    var y = function (v) { return PAD_T + (1 - v / maxY) * ch; };
+
+    function makePath(s) {
+      var d = "";
+      s.forEach(function (v, i) { d += (i === 0 ? "M" : "L") + x(i).toFixed(1) + "," + y(v).toFixed(1) + " "; });
+      return d;
+    }
+    function makeArea(s) {
+      var d = "M" + x(0) + "," + y(0) + " ";
+      s.forEach(function (v, i) { d += "L" + x(i).toFixed(1) + "," + y(v).toFixed(1) + " "; });
+      d += "L" + x(N - 1) + "," + y(0) + " Z";
+      return d;
+    }
+
+    var grid = "";
+    for (var i = 0; i <= 4; i++) {
+      var yy = PAD_T + (i / 4) * ch;
+      var val = Math.round(maxY - (i / 4) * maxY);
+      grid += "<line x1=\"" + PAD_L + "\" y1=\"" + yy + "\" x2=\"" + (W - PAD_R) + "\" y2=\"" + yy + "\" stroke=\"#1f1638\" stroke-dasharray=\"3 4\"/>";
+      grid += "<text x=\"" + (PAD_L - 8) + "\" y=\"" + (yy + 4) + "\" font-size=\"11\" fill=\"#6a5f8a\" text-anchor=\"end\" font-family=\"JetBrains Mono\">" + val + "</text>";
+    }
+    var xLabels = "";
+    for (var j = 0; j <= 4; j++) {
+      var xx = PAD_L + (j / 4) * cw;
+      var sec = Math.round(((4 - j) / 4) * totalSec);
+      xLabels += "<text x=\"" + xx + "\" y=\"" + (H - 8) + "\" font-size=\"11\" fill=\"#6a5f8a\" text-anchor=\"middle\" font-family=\"JetBrains Mono\">" + (sec === 0 ? "now" : "-" + sec + "s") + "</text>";
+    }
+
+    svg.innerHTML =
+      "<defs>" +
+        "<linearGradient id=\"gradProc\" x1=\"0\" x2=\"0\" y1=\"0\" y2=\"1\">" +
+          "<stop offset=\"0%\" stop-color=\"#4be3ff\" stop-opacity=\"0.45\"/>" +
+          "<stop offset=\"100%\" stop-color=\"#4be3ff\" stop-opacity=\"0\"/>" +
+        "</linearGradient>" +
+        "<filter id=\"glow\"><feGaussianBlur stdDeviation=\"2\"/></filter>" +
+      "</defs>" +
+      grid + xLabels +
+      "<path d=\"" + makeArea(seriesProcessed) + "\" fill=\"url(#gradProc)\"/>" +
+      "<path d=\"" + makePath(seriesProcessed) + "\" stroke=\"#4be3ff\" stroke-width=\"2\" fill=\"none\" filter=\"url(#glow)\" opacity=\"0.6\"/>" +
+      "<path d=\"" + makePath(seriesProcessed) + "\" stroke=\"#4be3ff\" stroke-width=\"2\" fill=\"none\"/>" +
+      "<path d=\"" + makePath(seriesFailed) + "\" stroke=\"#ff5470\" stroke-width=\"2\" fill=\"none\"/>" +
+      "<circle cx=\"" + x(N - 1) + "\" cy=\"" + y(seriesProcessed[N - 1]) + "\" r=\"4\" fill=\"#4be3ff\"/>" +
+      "<circle cx=\"" + x(N - 1) + "\" cy=\"" + y(seriesProcessed[N - 1]) + "\" r=\"8\" fill=\"#4be3ff\" opacity=\"0.25\"/>";
+
+    var tip = document.getElementById("chartTip");
+    svg.onmousemove = function (e) {
+      var rect = svg.getBoundingClientRect();
+      var px = (e.clientX - rect.left) / rect.width * W;
+      var idx = Math.max(0, Math.min(N - 1, Math.round(((px - PAD_L) / cw) * (N - 1))));
+      document.getElementById("tipProc").textContent = seriesProcessed[idx].toFixed(1);
+      document.getElementById("tipFail").textContent = seriesFailed[idx].toFixed(1);
+      var ageSec = (N - 1 - idx) * getInterval();
+      document.getElementById("tipTime").textContent = ageSec === 0 ? "now" : ageSec + "s ago";
+      tip.style.display = "block";
+      var cursorX = e.clientX - rect.left;
+      var tipW = tip.offsetWidth;
+      var tipX = cursorX + tipW + 24 > rect.width ? cursorX - tipW - 12 : cursorX + 12;
+      tip.style.left = tipX + "px";
+      tip.style.top = (e.clientY - rect.top + 12) + "px";
+    };
+    svg.onmouseleave = function () { tip.style.display = "none"; };
+  }
+
+  function formatVal(v) {
+    if (v >= 1000000) return (v / 1000000).toFixed(1).replace(/\.0$/, "") + "M";
+    if (v >= 1000) return Math.round(v / 1000) + "K";
+    return String(v);
+  }
+
+  // ---- history chart ----
+  var currentRange = "month";
+
+  function renderHistoryChart() {
+    var svg = document.getElementById("historyChart");
+    if (!svg) return;
+    var W = 1200, H = 320, PAD_L = 60, PAD_R = 30, PAD_T = 20, PAD_B = 40;
+    var cw = W - PAD_L - PAD_R, ch = H - PAD_T - PAD_B;
+
+    var histData = window.HISTORY_DATA;
+    if (!histData) return;
+
+    // select subset based on range
+    var allPoints = histData.processed;
+    var allFailed = histData.failed;
+    var allLabels = histData.labels;
+    var total = allPoints.length;
+
+    var sliceLen = total;
+    if (currentRange === "week") sliceLen = Math.min(7, total);
+    else if (currentRange === "month") sliceLen = Math.min(30, total);
+    else if (currentRange === "3m") sliceLen = Math.min(90, total);
+    else if (currentRange === "6m") sliceLen = Math.min(180, total);
+
+    var points = allPoints.slice(0, sliceLen);
+    var failed = allFailed.slice(0, sliceLen);
+    var labels = allLabels.slice(0, sliceLen);
+    if (points.length === 0) return;
+
+    var maxY = Math.max(1, Math.max.apply(null, points.concat(failed)));
+    var x = function (i) { return PAD_L + (i / Math.max(points.length - 1, 1)) * cw; };
+    var y = function (v) { return PAD_T + (1 - v / maxY) * ch; };
+
+    var line = "", area = "M" + x(0) + "," + y(0) + " ";
+    var failLine = "", failArea = "M" + x(0) + "," + y(0) + " ";
+    points.forEach(function (v, i) {
+      line += (i === 0 ? "M" : "L") + x(i).toFixed(1) + "," + y(v).toFixed(1) + " ";
+      area += "L" + x(i).toFixed(1) + "," + y(v).toFixed(1) + " ";
+    });
+    area += "L" + x(points.length - 1) + "," + y(0) + " Z";
+    failed.forEach(function (v, i) {
+      failLine += (i === 0 ? "M" : "L") + x(i).toFixed(1) + "," + y(v).toFixed(1) + " ";
+      failArea += "L" + x(i).toFixed(1) + "," + y(v).toFixed(1) + " ";
+    });
+    failArea += "L" + x(failed.length - 1) + "," + y(0) + " Z";
+
+    var grid = "";
+    for (var i = 0; i <= 4; i++) {
+      var yy = PAD_T + (i / 4) * ch;
+      var val = Math.round(maxY - (i / 4) * maxY);
+      grid += "<line x1=\"" + PAD_L + "\" y1=\"" + yy + "\" x2=\"" + (W - PAD_R) + "\" y2=\"" + yy + "\" stroke=\"#1f1638\" stroke-dasharray=\"2 4\"/>";
+      if (i > 0) grid += "<text x=\"" + (PAD_L - 10) + "\" y=\"" + (yy + 4) + "\" font-size=\"11\" fill=\"#6a5f8a\" text-anchor=\"end\" font-family=\"JetBrains Mono\">" + formatVal(val) + "</text>";
+    }
+
+    // label thinning
+    var labelStep = Math.max(1, Math.floor(labels.length / 6));
+    var xLabels = "";
+    labels.forEach(function (l, i) {
+      if (i % labelStep !== 0 && i !== labels.length - 1) return;
+      var xx = x(i);
+      xLabels += "<line x1=\"" + xx + "\" y1=\"" + PAD_T + "\" x2=\"" + xx + "\" y2=\"" + (H - PAD_B) + "\" stroke=\"#1f1638\" stroke-dasharray=\"2 4\"/>";
+      xLabels += "<text x=\"" + xx + "\" y=\"" + (H - 14) + "\" font-size=\"12\" fill=\"#a98cff\" text-anchor=\"middle\" font-family=\"JetBrains Mono\">" + l + "</text>";
+    });
+
+    svg.innerHTML =
+      "<defs>" +
+        "<linearGradient id=\"gradHist\" x1=\"0\" x2=\"0\" y1=\"0\" y2=\"1\">" +
+          "<stop offset=\"0%\" stop-color=\"#a98cff\" stop-opacity=\"0.35\"/>" +
+          "<stop offset=\"60%\" stop-color=\"#a98cff\" stop-opacity=\"0.05\"/>" +
+          "<stop offset=\"100%\" stop-color=\"#a98cff\" stop-opacity=\"0\"/>" +
+        "</linearGradient>" +
+        "<linearGradient id=\"gradHistLine\" x1=\"0\" x2=\"1\" y1=\"0\" y2=\"0\">" +
+          "<stop offset=\"0%\" stop-color=\"#a98cff\"/>" +
+          "<stop offset=\"60%\" stop-color=\"#ff5cd6\"/>" +
+          "<stop offset=\"100%\" stop-color=\"#7a3dff\"/>" +
+        "</linearGradient>" +
+        "<linearGradient id=\"gradFail\" x1=\"0\" x2=\"0\" y1=\"0\" y2=\"1\">" +
+          "<stop offset=\"0%\" stop-color=\"#ff5470\" stop-opacity=\"0.25\"/>" +
+          "<stop offset=\"100%\" stop-color=\"#ff5470\" stop-opacity=\"0\"/>" +
+        "</linearGradient>" +
+      "</defs>" +
+      grid + xLabels +
+      "<path d=\"" + area + "\" fill=\"url(#gradHist)\"/>" +
+      "<path d=\"" + failArea + "\" fill=\"url(#gradFail)\"/>" +
+      "<path d=\"" + line + "\" stroke=\"url(#gradHistLine)\" stroke-width=\"2.4\" fill=\"none\" stroke-linejoin=\"round\" stroke-linecap=\"round\"/>" +
+      "<path d=\"" + failLine + "\" stroke=\"#ff5470\" stroke-width=\"1.6\" fill=\"none\" stroke-linejoin=\"round\" stroke-linecap=\"round\"/>" +
+      points.map(function (v, i) {
+        return "<circle cx=\"" + x(i).toFixed(1) + "\" cy=\"" + y(v).toFixed(1) + "\" r=\"2.4\" fill=\"#170f29\" stroke=\"#a98cff\" stroke-width=\"1.5\"/>";
+      }).join("");
+  }
+
+  // ---- live polling via fetch ----
+  function fetchStats() {
+    if (!isLive) return;
+    var root = window.SIDE_BRO_ROOT || "/";
+    fetch(root + "stats")
+      .then(function (r) { return r.json(); })
+      .then(function (data) {
+        var proc = data.processed || 0;
+        var fail = data.failed || 0;
+        var deltaProc = prevProcessed === null ? 0 : Math.max(0, proc - prevProcessed);
+        var deltaFail = prevFailed === null ? 0 : Math.max(0, fail - prevFailed);
+        prevProcessed = proc;
+        prevFailed = fail;
+        seriesProcessed.shift(); seriesProcessed.push(deltaProc);
+        seriesFailed.shift(); seriesFailed.push(deltaFail);
+        renderLiveChart();
+      })
+      .catch(function () {
+        renderLiveChart();
+      });
+  }
+
+  function restartTimer() {
+    if (pollTimer) clearInterval(pollTimer);
+    if (!isLive) return;
+    pollTimer = setInterval(fetchStats, getInterval() * 1000);
+  }
+
+  // ---- history tabs ----
+  document.querySelectorAll("#historyTabs .chip").forEach(function (c) {
+    c.addEventListener("click", function () {
+      document.querySelectorAll("#historyTabs .chip").forEach(function (x) { x.classList.remove("active"); });
+      c.classList.add("active");
+      currentRange = c.dataset.range;
+      renderHistoryChart();
+    });
+  });
+
+  // ---- init ----
+  var chartTime = document.getElementById("chartTime");
+  if (chartTime) chartTime.textContent = new Date().toUTCString().replace(" GMT", "") + " UTC";
+
+  renderLiveChart();
+  renderHistoryChart();
+  restartTimer();
+})();

data/web/assets/javascripts/metrics.js

@@ -0,0 +1 @@
+// Metrics charts