rperf 0.8.0 → 0.10.0

data/lib/rperf/viewer.rb

@@ -1,8 +1,14 @@
 require_relative "../rperf"
 require "json"
+require "time"
 
 # Rack middleware that serves flamegraph visualizations of rperf snapshots.
 #
+# *Security note*: This middleware exposes profiling data without
+# authentication. It is intended for development and staging environments.
+# In production, place it behind an authenticated reverse proxy or restrict
+# access by IP / VPN.
+#
 # Usage:
 #   require "rperf/viewer"
 #   use Rperf::Viewer                             # mount at /rperf (default)
@@ -14,6 +20,12 @@ require "json"
 #   viewer.take_snapshot!          # snapshot with clear: true
 #   viewer.add_snapshot(data)      # or add pre-taken snapshot data
 #
+# Time-travel mode (multiple snapshots from a directory):
+#   viewer.add_snapshot_dir("./profiles")   # *.json(.gz) files; lazy-loaded
+#
+# The UI fetches data from /snapshots (list with meta/summary only) and
+# /snapshots/:id (full body). When more than one snapshot is present, a
+# sidebar lists them with commit info and diff/pin/sparkline support.
 class Rperf::Viewer
   @instance = nil
 
@@ -25,10 +37,13 @@ class Rperf::Viewer
   attr_reader :max_snapshots, :path
 
   def initialize(app, path: "/rperf", max_snapshots: 24)
+    raise ArgumentError, "max_snapshots must be a positive integer, got #{max_snapshots.inspect}" unless max_snapshots.is_a?(Integer) && max_snapshots > 0
     @app = app
     @path = path.chomp("/")
     @max_snapshots = max_snapshots
-    @snapshots = []  # [{id:, taken_at:, data:}, ...]
+    # In-memory entries: {id:, taken_at:, data:}
+    # Directory entries: {id:, taken_at:, path:, meta:, summary:} — body lazy-loaded
+    @snapshots = []
     @mutex = Mutex.new
     @next_id = 0
     self.class.instance_variable_set(:@instance, self)
@@ -43,16 +58,58 @@ class Rperf::Viewer
   end
 
   # Add a pre-taken snapshot hash to the history.
+  # Attaches meta/summary (phase-1 profile format) unless already present,
+  # so in-memory snapshots and directory profiles share the same list UI.
   def add_snapshot(data)
+    data[:meta] ||= Rperf::Meta.build_meta(data)
+    data[:summary] ||= Rperf::Meta.build_summary(data)
     @mutex.synchronize do
       @next_id += 1
       entry = { id: @next_id, taken_at: Time.now, data: data }
       @snapshots << entry
-      @snapshots.shift while @snapshots.size > @max_snapshots
+      # Evict only in-memory snapshots: directory entries (time-travel mode)
+      # are exempt from max_snapshots and hold no body memory anyway
+      while @snapshots.count { |s| s[:data] } > @max_snapshots
+        idx = @snapshots.index { |s| s[:data] }
+        @snapshots.delete_at(idx)
+      end
       entry
     end
   end
 
+  # Add all *.json(.gz) profiles in dir as lazy-loaded snapshots
+  # (time-travel mode). Only meta/summary are read up front (Rperf.read_meta);
+  # bodies are loaded on selection. Files without meta (older rperf) are
+  # listed as unknown snapshots. Entries are sorted by
+  # meta.git.committed_at → meta.created_at → file mtime.
+  # max_snapshots does not apply. Returns the number of files added.
+  def add_snapshot_dir(dir)
+    files = Dir.glob(File.join(dir, "*.json.gz")) + Dir.glob(File.join(dir, "*.json"))
+    entries = files.filter_map do |file|
+      head = Rperf.read_meta(file)
+      meta = head && head[:meta]
+      summary = head && head[:summary]
+      # File may vanish between glob and stat — skip instead of aborting the
+      # whole listing
+      mtime = begin
+        File.mtime(file)
+      rescue SystemCallError
+        next
+      end
+      { path: file, meta: meta, summary: summary, taken_at: mtime,
+        sort_time: snapshot_sort_time(meta, mtime) }
+    end
+    entries.sort_by! { |e| e[:sort_time] }
+    @mutex.synchronize do
+      entries.each do |e|
+        @next_id += 1
+        @snapshots << { id: @next_id, taken_at: e[:taken_at], path: e[:path],
+                        meta: e[:meta], summary: e[:summary] }
+      end
+    end
+    entries.size
+  end
+
   # Rack interface
   def call(env)
     req_path = env["PATH_INFO"] || "/"
@@ -81,13 +138,91 @@ class Rperf::Viewer
     end
   end
 
+  # Convert aggregated samples to JSON-friendly format.
+  # Stack is stored top-to-bottom (leaf first) in C; reverse to root-first for flamegraph.
+  # Label set keys are converted from symbols to strings for JSON.
+  def self.samples_to_json(samples, label_sets)
+    json_samples = samples.map do |frames, weight, _thread_seq, label_set_id|
+      # thread_seq is intentionally omitted: the viewer UI never reads it,
+      # and it would bloat the largest responses the viewer serves
+      {
+        stack: frames.reverse.map { |_, label| label },
+        weight: weight,
+        label_set_id: label_set_id || 0,
+      }
+    end
+    json_label_sets = label_sets.map do |ls|
+      ls.is_a?(Hash) ? ls.transform_keys(&:to_s) : ls
+    end
+    [json_samples, json_label_sets]
+  end
+
+  # Generate a self-contained static HTML file with inline snapshot data.
+  # The HTML loads d3/d3-flamegraph from CDN but requires no server.
+  # This is the one intentional exception to fetch-based data loading:
+  # a static file has no server to fetch from.
+  def self.render_static_html(data)
+    samples = data[:aggregated_samples] || []
+    label_sets = data[:label_sets] || []
+    json_samples, json_label_sets = samples_to_json(samples, label_sets)
+
+    json_snapshot = JSON.generate({
+      id: 1,
+      taken_at: Time.now.iso8601,
+      mode: data[:mode],
+      frequency: data[:frequency],
+      duration_ns: data[:duration_ns],
+      sampling_count: data[:sampling_count],
+      meta: data[:meta],
+      summary: data[:summary],
+      samples: json_samples,
+      label_sets: json_label_sets,
+    })
+
+    logo = LOGO_SVG.sub("<svg ", '<svg style="height:36px;width:auto" ')
+
+    html = VIEWER_HTML.sub("<!-- LOGO -->") { logo }
+
+    # Hide the snapshot selector including its "Snapshot:" label text
+    # (single snapshot, no server)
+    html = html.sub('<label id="lbl-snapshot">', '<label id="lbl-snapshot" style="display:none">')
+
+    # Replace dynamic loading with inline data.
+    # Escape for safe embedding in <script>:
+    #  - "</" prevents closing </script> tag injection
+    #  - U+2028/U+2029 are line terminators in JS but valid in JSON
+    json_safe = json_snapshot
+      .gsub("</", "<\\/")
+      .gsub("
", "\\u2028")
+      .gsub("
", "\\u2029")
+    # Block form: the String-replacement form of sub interprets \\ and \&
+    # in the replacement, corrupting JSON that contains backslashes
+    html = html.sub("loadSnapshotList().catch(showLoadError);") {
+      "currentData = #{json_safe}; updateTagDropdowns(); applyAndRender();"
+    }
+
+    html
+  end
+
   private
 
+  def snapshot_sort_time(meta, mtime)
+    str = meta&.dig(:git, :committed_at) || meta&.dig(:created_at)
+    return mtime unless str
+    begin
+      Time.iso8601(str)
+    rescue ArgumentError
+      mtime
+    end
+  end
+
   LOGO_SVG = begin
     path = File.expand_path("../../docs/logo.svg", __dir__)
     File.exist?(path) ? File.read(path).freeze : ""
   end
 
+  VIEWER_HTML = File.read(File.expand_path("viewer/viewer.html", __dir__)).freeze
+
   def serve_html
     logo = LOGO_SVG
       .sub("<svg ", '<svg style="height:36px;width:auto" ')
@@ -102,12 +237,18 @@ class Rperf::Viewer
   def serve_snapshot_list
     list = @mutex.synchronize do
       @snapshots.map do |s|
+        data = s[:data]
         {
           id: s[:id],
           taken_at: s[:taken_at].iso8601,
-          mode: s[:data][:mode],
-          duration_ns: s[:data][:duration_ns],
-          sampling_count: s[:data][:sampling_count],
+          # scrub: one non-UTF8 filename must not make JSON.generate raise
+          # and 500 the whole snapshot list
+          file: s[:path] ? File.basename(s[:path]).dup.force_encoding(Encoding::UTF_8).scrub : nil,
+          mode: data ? data[:mode] : s.dig(:meta, :mode),
+          duration_ns: data && data[:duration_ns],
+          sampling_count: data && data[:sampling_count],
+          meta: data ? data[:meta] : s[:meta],
+          summary: data ? data[:summary] : s[:summary],
         }
       end
     end
@@ -119,24 +260,17 @@ class Rperf::Viewer
     return [404, { "content-type" => "text/plain" }, ["Snapshot not found"]] unless entry
 
     data = entry[:data]
-    samples = data[:aggregated_samples]
-    label_sets = data[:label_sets] || []
-
-    # Convert samples to JSON-friendly format.
-    # Stack is stored top-to-bottom (leaf first) in C; reverse to root-first for flamegraph.
-    json_samples = samples.map do |frames, weight, thread_seq, label_set_id|
-      {
-        stack: frames.reverse.map { |_, label| label },
-        weight: weight,
-        thread_seq: thread_seq || 0,
-        label_set_id: label_set_id || 0,
-      }
-    end
-
-    # Convert label_sets: symbol keys to string keys for JSON
-    json_label_sets = label_sets.map do |ls|
-      ls.is_a?(Hash) ? ls.transform_keys(&:to_s) : ls
+    if data.nil? && entry[:path]
+      # Lazy-load directory entry; body is not retained server-side
+      begin
+        data = Rperf.load(entry[:path])
+      rescue StandardError => e
+        return [500, { "content-type" => "text/plain" }, ["Failed to load #{File.basename(entry[:path])}: #{e.message}"]]
+      end
     end
+    samples = data[:aggregated_samples] || []
+    label_sets = data[:label_sets] || []
+    json_samples, json_label_sets = self.class.samples_to_json(samples, label_sets)
 
     json_response({
       id: entry[:id],
@@ -145,6 +279,8 @@ class Rperf::Viewer
       frequency: data[:frequency],
       duration_ns: data[:duration_ns],
       sampling_count: data[:sampling_count],
+      meta: data[:meta] || entry[:meta],
+      summary: data[:summary] || entry[:summary],
       samples: json_samples,
       label_sets: json_label_sets,
     })
@@ -156,643 +292,4 @@ class Rperf::Viewer
       "x-content-type-options" => "nosniff",
     }, [JSON.generate(obj)]]
   end
-
-  VIEWER_HTML = <<~'HTML'
-<!DOCTYPE html>
-<html lang="en">
-<head>
-<meta charset="utf-8">
-<title>rperf Viewer</title>
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/d3-flame-graph@4/dist/d3-flamegraph.css" integrity="sha384-DgAQSBzzhv8bu6Qc6Lq08THluOr+kO5qLMHt1yv8A3my7Jz2OQv6aq/WSZRYIQkG" crossorigin="anonymous">
-<style>
-* { box-sizing: border-box; margin: 0; padding: 0; }
-body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, monospace; background: #fafafa; color: #333; }
-
-/* Header */
-.header { background: #fff; padding: 10px 20px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; border-bottom: 1px solid #ddd; }
-.controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
-.controls label { font-size: 13px; color: #555; }
-.controls select, .controls input[type="text"] {
-  background: #fff; color: #333; border: 1px solid #ccc; border-radius: 4px;
-  padding: 4px 8px; font-size: 13px; font-family: inherit;
-}
-.controls input[type="text"] { width: 120px; }
-.dropdown-cb { position: relative; display: inline-block; vertical-align: middle; }
-.dropdown-cb-btn {
-  background: #fff; color: #888; border: 1px solid #ccc; border-radius: 4px;
-  padding: 4px 8px; font-size: 13px; font-family: inherit; cursor: pointer; min-width: 60px; text-align: left;
-}
-.dropdown-cb-btn.has-selection { color: #333; }
-.dropdown-cb-btn:hover { border-color: #999; }
-.dropdown-cb-list {
-  display: none; position: absolute; top: 100%; left: 0; z-index: 100;
-  background: #fff; border: 1px solid #ccc; border-radius: 4px;
-  padding: 4px 0; min-width: 180px; max-height: 240px; overflow-y: auto;
-  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
-}
-.dropdown-cb-list.open { display: block; }
-.dropdown-cb-list label {
-  display: block; padding: 4px 10px; font-size: 12px; cursor: pointer; white-space: nowrap;
-  color: #333; background: none; border: none; border-radius: 0;
-}
-.dropdown-cb-list label:hover { background: #f0e8e0; }
-.controls input[type="text"]::placeholder { color: #aaa; }
-
-/* Tabs */
-.tabs { display: flex; background: #fff; border-bottom: 1px solid #ddd; padding: 0 20px; }
-.tab {
-  padding: 8px 20px; font-size: 13px; color: #888; cursor: pointer;
-  border-bottom: 2px solid transparent; transition: color 0.15s;
-}
-.tab:hover { color: #555; }
-.tab.active { color: #cc342d; border-bottom-color: #cc342d; }
-
-/* Info bar */
-.info-bar { background: #f5f5f5; padding: 6px 20px; font-size: 12px; color: #888; border-bottom: 1px solid #eee; }
-
-/* Tab content */
-.tab-content { display: none; }
-.tab-content.active { display: block; }
-#panel-flamegraph { background: #fff; min-height: 300px; }
-.empty-state { display: flex; align-items: center; justify-content: center; height: 400px; color: #aaa; font-size: 16px; }
-#panel-flamegraph .d3-flame-graph rect { stroke: #fff; stroke-width: 0.5px; }
-
-/* Top table */
-#panel-top { padding: 16px 20px; background: #fff; }
-#panel-top table { width: 100%; border-collapse: collapse; font-size: 13px; }
-#panel-top th { text-align: left; color: #cc342d; border-bottom: 2px solid #eee; padding: 6px 8px; cursor: pointer; }
-#panel-top th:hover { color: #a82a24; }
-#panel-top td { padding: 5px 8px; border-bottom: 1px solid #f0f0f0; }
-#panel-top tr:hover td { background: #faf5f0; }
-.num { text-align: right; font-variant-numeric: tabular-nums; }
-
-/* Tags panel */
-#panel-tags { padding: 16px 20px; background: #fff; }
-.tag-group { margin-bottom: 20px; }
-.tag-group h3 { font-size: 14px; color: #cc342d; margin-bottom: 8px; }
-.tag-group table { width: 100%; max-width: 600px; border-collapse: collapse; font-size: 13px; }
-.tag-group th { text-align: left; color: #888; border-bottom: 2px solid #eee; padding: 5px 8px; }
-.tag-group td { padding: 5px 8px; border-bottom: 1px solid #f0f0f0; }
-.tag-group tr:hover td { background: #faf5f0; }
-.tag-group tr { cursor: pointer; }
-.tag-bar { display: inline-block; height: 12px; background: #cc342d; border-radius: 2px; vertical-align: middle; }
-</style>
-</head>
-<body>
-<div class="header">
-  <a href="https://github.com/ko1/rperf" target="_blank" rel="noopener" title="rperf on GitHub" style="display:flex;align-items:center;text-decoration:none;">
-    <!-- LOGO -->
-  </a>
-  <div class="controls">
-    <label>Snapshot:
-      <select id="sel-snapshot"><option value="">Loading...</option></select>
-    </label>
-    <label>tagfocus: <input type="text" id="in-tagfocus" placeholder="value regex"></label>
-    <label>tagignore:
-      <span class="dropdown-cb">
-        <button type="button" id="btn-tagignore" class="dropdown-cb-btn">none</button>
-        <div id="cb-tagignore" class="dropdown-cb-list"></div>
-      </span>
-    </label>
-    <label>tagroot:
-      <span class="dropdown-cb">
-        <button type="button" id="btn-tagroot" class="dropdown-cb-btn">none</button>
-        <div id="cb-tagroot" class="dropdown-cb-list"></div>
-      </span>
-    </label>
-    <label>tagleaf:
-      <span class="dropdown-cb">
-        <button type="button" id="btn-tagleaf" class="dropdown-cb-btn">none</button>
-        <div id="cb-tagleaf" class="dropdown-cb-list"></div>
-      </span>
-    </label>
-  </div>
-</div>
-<div class="tabs">
-  <div class="tab active" data-tab="flamegraph">Flamegraph</div>
-  <div class="tab" data-tab="top">Top</div>
-  <div class="tab" data-tab="tags">Tags</div>
-</div>
-<div id="info-bar" class="info-bar"></div>
-<div id="panel-flamegraph" class="tab-content active"></div>
-<div id="panel-top" class="tab-content"></div>
-<div id="panel-tags" class="tab-content"></div>
-
-<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.9.0/d3.min.js" integrity="sha384-CjloA8y00+1SDAUkjs099PVfnY2KmDC2BZnws9kh8D/lX1s46w6EPhpXdqMfjK6i" crossorigin="anonymous"></script>
-<script src="https://cdn.jsdelivr.net/npm/d3-flame-graph@4/dist/d3-flamegraph.min.js" integrity="sha384-p4NaVVE+k6MT/enE0MtQ8B15rM9BGzHCnx8DizawPGks1ssZUeNdw6bAPpH2gp2w" crossorigin="anonymous"></script>
-<script>
-"use strict";
-
-var BASE = location.pathname.replace(/\/$/, "");
-var currentData = null;
-var currentTab = "flamegraph";
-var filteredSamples = null;  // cached after filter
-var totalFilteredNs = 0;
-
-// --- Helpers ---
-
-function fmtMs(ns) { return (ns / 1e6).toFixed(2); }
-function fmtPct(ns, total) { return total > 0 ? (ns / total * 100).toFixed(1) : "0.0"; }
-
-// --- Data fetching ---
-
-async function fetchJSON(path) {
-  var res = await fetch(BASE + path);
-  if (!res.ok) throw new Error(res.status + " " + res.statusText);
-  return res.json();
-}
-
-async function loadSnapshotList() {
-  var list = await fetchJSON("/snapshots");
-  var sel = document.getElementById("sel-snapshot");
-  sel.innerHTML = "";
-  if (list.length === 0) {
-    sel.innerHTML = '<option value="">No snapshots</option>';
-    return;
-  }
-  var reversed = list.slice().reverse();
-  reversed.forEach(function(s) {
-    var opt = document.createElement("option");
-    opt.value = s.id;
-    var t = new Date(s.taken_at);
-    var dur = (s.duration_ns / 1e9).toFixed(1);
-    opt.textContent = "#" + s.id + " " + t.toLocaleTimeString() +
-      " (" + s.mode + ", " + dur + "s, " + s.sampling_count + " samples)";
-    sel.appendChild(opt);
-  });
-  await loadSnapshot(reversed[0].id);
-}
-
-async function loadSnapshot(id) {
-  currentData = await fetchJSON("/snapshots/" + id);
-  updateTagDropdowns();
-  applyAndRender();
-}
-
-// --- Update tag key/value dropdowns from current snapshot ---
-
-function updateTagDropdowns() {
-  if (!currentData || !currentData.label_sets) return;
-  var labelSets = currentData.label_sets;
-
-  // Collect all keys and all key:value pairs
-  var keys = {};
-  var vals = {};
-  labelSets.forEach(function(ls) {
-    if (!ls) return;
-    Object.keys(ls).forEach(function(k) {
-      keys[k] = true;
-      var compound = k + " = " + ls[k];
-      vals[compound] = true;
-    });
-  });
-
-  var sortedKeys = Object.keys(keys).sort();
-  // Group by key: for each key, (none) first, then values sorted
-  var sortedVals = [];
-  sortedKeys.forEach(function(k) {
-    sortedVals.push(k + " = (none)");
-    Object.keys(vals).sort().forEach(function(v) {
-      if (v.substring(0, k.length + 3) === k + " = ") sortedVals.push(v);
-    });
-  });
-
-  // tagroot / tagleaf: dropdown checkboxes for label keys
-  ["tagroot", "tagleaf"].forEach(function(name) {
-    var container = document.getElementById("cb-" + name);
-    var prev = getCheckedValues(container);
-    container.innerHTML = "";
-    sortedKeys.forEach(function(k) {
-      var lbl = document.createElement("label");
-      var cb = document.createElement("input");
-      cb.type = "checkbox";
-      cb.value = k;
-      if (prev.indexOf(k) >= 0) cb.checked = true;
-      cb.addEventListener("change", function() {
-        updateDropdownButton("btn-" + name, "cb-" + name, "none");
-        applyAndRender();
-      });
-      lbl.appendChild(cb);
-      lbl.appendChild(document.createTextNode(" " + k));
-      container.appendChild(lbl);
-    });
-    updateDropdownButton("btn-" + name, "cb-" + name, "none");
-  });
-
-  // tagignore: dropdown with checkboxes for key=value pairs
-  var container = document.getElementById("cb-tagignore");
-  var prev = getCheckedValues(container);
-  container.innerHTML = "";
-  sortedVals.forEach(function(display) {
-    var lbl = document.createElement("label");
-    var cb = document.createElement("input");
-    cb.type = "checkbox";
-    cb.value = display;
-    if (prev.indexOf(display) >= 0) cb.checked = true;
-    cb.addEventListener("change", function() {
-      updateDropdownButton("btn-tagignore", "cb-tagignore", "none");
-      applyAndRender();
-    });
-    lbl.appendChild(cb);
-    lbl.appendChild(document.createTextNode(" " + display));
-    container.appendChild(lbl);
-  });
-  updateDropdownButton("btn-tagignore", "cb-tagignore", "none");
-}
-
-function updateDropdownButton(btnId, containerId, emptyText) {
-  var vals = getCheckedValues(document.getElementById(containerId));
-  var btn = document.getElementById(btnId);
-  if (vals.length === 0) {
-    btn.textContent = emptyText;
-    btn.classList.remove("has-selection");
-  } else {
-    btn.textContent = vals.join(", ");
-    btn.classList.add("has-selection");
-  }
-}
-
-function getCheckedValues(container) {
-  var result = [];
-  var cbs = container.querySelectorAll("input[type=checkbox]:checked");
-  for (var i = 0; i < cbs.length; i++) result.push(cbs[i].value);
-  return result;
-}
-
-// --- Tag filtering ---
-
-function getFilteredSamples() {
-  if (!currentData) return [];
-  var samples = currentData.samples;
-  var labelSets = currentData.label_sets || [];
-  var tagfocus = document.getElementById("in-tagfocus").value.trim();
-  var tagignoreVals = getCheckedValues(document.getElementById("cb-tagignore"));
-  var tagroots = getCheckedValues(document.getElementById("cb-tagroot"));
-  var tagleaves = getCheckedValues(document.getElementById("cb-tagleaf"));
-
-  var filtered = samples;
-
-  // tagfocus: keep only samples whose label values match the regex
-  if (tagfocus) {
-    try { var re = new RegExp(tagfocus); } catch(e) { /* invalid regex, skip filter */ }
-    if (!re) return filtered;
-    filtered = filtered.filter(function(s) {
-      if (s.label_set_id === 0) return false;
-      var ls = labelSets[s.label_set_id];
-      if (!ls) return false;
-      return Object.values(ls).some(function(v) { return re.test(String(v)); });
-    });
-  }
-
-  // tagignore: remove samples matching selected key=value pairs (or missing key for "(none)")
-  if (tagignoreVals.length > 0) {
-    var ignores = tagignoreVals.map(function(s) {
-      var idx = s.indexOf(" = ");
-      return { key: s.substring(0, idx), val: s.substring(idx + 3) };
-    });
-    filtered = filtered.filter(function(s) {
-      var ls = (s.label_set_id > 0) ? labelSets[s.label_set_id] : null;
-      return !ignores.some(function(ig) {
-        if (ig.val === "(none)") {
-          // Match samples that do NOT have this key
-          return !ls || !(ig.key in ls);
-        }
-        return ls && ls[ig.key] !== undefined && String(ls[ig.key]) === ig.val;
-      });
-    });
-  }
-
-  // tagroot: prepend label values as root frames (outermost first)
-  if (tagroots.length > 0) {
-    filtered = filtered.map(function(s) {
-      if (s.label_set_id === 0) return s;
-      var ls = labelSets[s.label_set_id];
-      if (!ls) return s;
-      var extra = [];
-      for (var i = 0; i < tagroots.length; i++) {
-        var k = tagroots[i];
-        if (k in ls) extra.push("[" + k + ": " + ls[k] + "]");
-      }
-      if (extra.length === 0) return s;
-      return Object.assign({}, s, { stack: extra.concat(s.stack) });
-    });
-  }
-
-  // tagleaf: append label values as leaf frames (innermost first)
-  if (tagleaves.length > 0) {
-    filtered = filtered.map(function(s) {
-      if (s.label_set_id === 0) return s;
-      var ls = labelSets[s.label_set_id];
-      if (!ls) return s;
-      var extra = [];
-      for (var i = 0; i < tagleaves.length; i++) {
-        var k = tagleaves[i];
-        if (k in ls) extra.push("[" + k + ": " + ls[k] + "]");
-      }
-      if (extra.length === 0) return s;
-      return Object.assign({}, s, { stack: s.stack.concat(extra) });
-    });
-  }
-
-  return filtered;
-}
-
-function applyAndRender() {
-  filteredSamples = getFilteredSamples();
-  totalFilteredNs = 0;
-  for (var i = 0; i < filteredSamples.length; i++) totalFilteredNs += filteredSamples[i].weight;
-
-  // Update info bar
-  if (!currentData) return;
-  var dur = (currentData.duration_ns / 1e9).toFixed(2);
-  document.getElementById("info-bar").textContent =
-    "Mode: " + currentData.mode + " | Freq: " + currentData.frequency + "Hz | Duration: " + dur + "s" +
-    " | Stacks: " + filteredSamples.length + " | Total weight: " + fmtMs(totalFilteredNs) + "ms";
-
-  renderCurrentTab();
-}
-
-function renderCurrentTab() {
-  if (currentTab === "flamegraph") renderFlamegraph();
-  else if (currentTab === "top") renderTop();
-  else if (currentTab === "tags") renderTags();
-}
-
-// ==================== Flamegraph ====================
-
-function buildTree(samples) {
-  var root = { name: "root", value: 0, children: [] };
-  for (var si = 0; si < samples.length; si++) {
-    var sample = samples[si];
-    var node = root;
-    for (var i = 0; i < sample.stack.length; i++) {
-      var name = sample.stack[i];
-      var child = null;
-      for (var j = 0; j < node.children.length; j++) {
-        if (node.children[j].name === name) { child = node.children[j]; break; }
-      }
-      if (!child) {
-        child = { name: name, value: 0, children: [] };
-        node.children.push(child);
-      }
-      node = child;
-    }
-    node.value += sample.weight;
-  }
-  return root;
-}
-
-function renderFlamegraph() {
-  var el = document.getElementById("panel-flamegraph");
-  el.innerHTML = "";
-  if (!filteredSamples || filteredSamples.length === 0) {
-    el.innerHTML = '<div class="empty-state">No matching samples</div>';
-    return;
-  }
-  var tree = buildTree(filteredSamples);
-  var total = totalFilteredNs;
-  var width = el.clientWidth || document.body.clientWidth;
-  var chart = flamegraph()
-    .width(width)
-    .cellHeight(20)
-    .selfValue(true)
-    .getName(function(d) {
-      return d.data.name + " (" + fmtMs(d.data.value) + "ms, " + fmtPct(d.data.value, total) + "%)";
-    });
-  d3.select("#panel-flamegraph").datum(tree).call(chart);
-}
-
-// ==================== Top ====================
-
-var topSortKey = "flat";
-var topSortAsc = false;
-
-function renderTop() {
-  var el = document.getElementById("panel-top");
-  if (!filteredSamples || filteredSamples.length === 0) {
-    el.innerHTML = '<div class="empty-state">No matching samples</div>';
-    return;
-  }
-
-  // Compute flat (leaf) and cumulative (any position) per function
-  var flatMap = {};
-  var cumMap = {};
-  for (var si = 0; si < filteredSamples.length; si++) {
-    var s = filteredSamples[si];
-    var stack = s.stack;
-    var w = s.weight;
-    var leaf = stack[stack.length - 1];
-    flatMap[leaf] = (flatMap[leaf] || 0) + w;
-    var seen = {};
-    for (var i = 0; i < stack.length; i++) {
-      if (!seen[stack[i]]) {
-        seen[stack[i]] = true;
-        cumMap[stack[i]] = (cumMap[stack[i]] || 0) + w;
-      }
-    }
-  }
-
-  var rows = [];
-  var allNames = {};
-  Object.keys(flatMap).forEach(function(k) { allNames[k] = true; });
-  Object.keys(cumMap).forEach(function(k) { allNames[k] = true; });
-  Object.keys(allNames).forEach(function(name) {
-    rows.push({ name: name, flat: flatMap[name] || 0, cum: cumMap[name] || 0 });
-  });
-
-  // Sort
-  var key = topSortKey;
-  var asc = topSortAsc;
-  rows.sort(function(a, b) {
-    var va = (key === "name") ? a.name : a[key];
-    var vb = (key === "name") ? b.name : b[key];
-    if (key === "name") {
-      return asc ? va.localeCompare(vb) : vb.localeCompare(va);
-    }
-    return asc ? va - vb : vb - va;
-  });
-
-  var total = totalFilteredNs;
-  var arrow = function(k) { return (topSortKey === k) ? (topSortAsc ? " \u25b2" : " \u25bc") : ""; };
-  var html = '<table><thead><tr>' +
-    '<th class="num" data-sort="flat">Flat' + arrow("flat") + '</th>' +
-    '<th class="num" data-sort="cum">Cum' + arrow("cum") + '</th>' +
-    '<th data-sort="name">Function' + arrow("name") + '</th>' +
-    '</tr></thead><tbody>';
-  var limit = Math.min(rows.length, 50);
-  for (var ri = 0; ri < limit; ri++) {
-    var r = rows[ri];
-    html += '<tr>' +
-      '<td class="num">' + fmtMs(r.flat) + 'ms (' + fmtPct(r.flat, total) + '%)</td>' +
-      '<td class="num">' + fmtMs(r.cum) + 'ms (' + fmtPct(r.cum, total) + '%)</td>' +
-      '<td>' + escHtml(r.name) + '</td>' +
-      '</tr>';
-  }
-  html += '</tbody></table>';
-  if (rows.length > 50) {
-    html += '<p style="color:#888;margin-top:8px;font-size:12px;">Showing top 50 of ' + rows.length + ' functions</p>';
-  }
-  el.innerHTML = html;
-
-  // Attach sort handlers
-  el.querySelectorAll("th[data-sort]").forEach(function(th) {
-    th.addEventListener("click", function() {
-      var newKey = th.getAttribute("data-sort");
-      if (topSortKey === newKey) {
-        topSortAsc = !topSortAsc;
-      } else {
-        topSortKey = newKey;
-        topSortAsc = (newKey === "name");
-      }
-      renderTop();
-    });
-  });
-}
-
-function escHtml(s) {
-  return s.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;");
-}
-
-// ==================== Tags ====================
-
-function renderTags() {
-  var el = document.getElementById("panel-tags");
-  if (!currentData) { el.innerHTML = '<div class="empty-state">No data</div>'; return; }
-
-  var samples = filteredSamples || [];
-  var labelSets = currentData.label_sets || [];
-  if (labelSets.length === 0) {
-    el.innerHTML = '<div class="empty-state">No tags in this snapshot</div>';
-    return;
-  }
-
-  // Collect all tag keys
-  var tagKeys = {};
-  labelSets.forEach(function(ls) {
-    if (!ls) return;
-    Object.keys(ls).forEach(function(k) { tagKeys[k] = true; });
-  });
-
-  var keys = Object.keys(tagKeys);
-  if (keys.length === 0) {
-    el.innerHTML = '<div class="empty-state">No tags in this snapshot</div>';
-    return;
-  }
-
-  // For each key, aggregate weight per value
-  var html = "";
-  keys.forEach(function(key) {
-    var byVal = {};     // value -> weight
-    var untagged = 0;   // weight without this key
-    for (var i = 0; i < samples.length; i++) {
-      var s = samples[i];
-      var ls = (s.label_set_id > 0) ? labelSets[s.label_set_id] : null;
-      if (ls && key in ls) {
-        var v = String(ls[key]);
-        byVal[v] = (byVal[v] || 0) + s.weight;
-      } else {
-        untagged += s.weight;
-      }
-    }
-
-    var entries = [];
-    Object.keys(byVal).forEach(function(v) { entries.push({ val: v, weight: byVal[v] }); });
-    entries.sort(function(a, b) { return b.weight - a.weight; });
-    var maxWeight = entries.length > 0 ? entries[0].weight : 0;
-    var total = totalFilteredNs;
-
-    html += '<div class="tag-group"><h3>' + escHtml(key) +
-      ' <span style="color:#666;font-weight:normal;">(' + entries.length + ' values)</span></h3>';
-    html += '<table><thead><tr><th>Value</th><th class="num">Weight</th><th class="num">%</th><th style="width:200px"></th></tr></thead><tbody>';
-    entries.forEach(function(e) {
-      var barW = maxWeight > 0 ? Math.max(1, Math.round(e.weight / maxWeight * 180)) : 0;
-      html += '<tr data-tagfocus="' + escAttr(key) + ':' + escAttr(e.val) + '">' +
-        '<td>' + escHtml(e.val) + '</td>' +
-        '<td class="num">' + fmtMs(e.weight) + 'ms</td>' +
-        '<td class="num">' + fmtPct(e.weight, total) + '%</td>' +
-        '<td><span class="tag-bar" style="width:' + barW + 'px"></span></td>' +
-        '</tr>';
-    });
-    if (untagged > 0) {
-      html += '<tr style="color:#666"><td>(untagged)</td>' +
-        '<td class="num">' + fmtMs(untagged) + 'ms</td>' +
-        '<td class="num">' + fmtPct(untagged, total) + '%</td>' +
-        '<td></td></tr>';
-    }
-    html += '</tbody></table></div>';
-  });
-
-  el.innerHTML = html;
-
-  // Click on a tag value row -> set tagfocus and switch to flamegraph
-  el.querySelectorAll("tr[data-tagfocus]").forEach(function(tr) {
-    tr.addEventListener("click", function() {
-      var parts = tr.getAttribute("data-tagfocus").split(":");
-      var val = parts.slice(1).join(":");
-      document.getElementById("in-tagfocus").value = "^" + escRegex(val) + "$";
-      switchTab("flamegraph");
-      applyAndRender();
-    });
-  });
-}
-
-function escAttr(s) { return s.replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/</g,"&lt;"); }
-function escRegex(s) { return s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"); }
-
-// ==================== Tab switching ====================
-
-function switchTab(name) {
-  currentTab = name;
-  document.querySelectorAll(".tab").forEach(function(t) {
-    t.classList.toggle("active", t.getAttribute("data-tab") === name);
-  });
-  document.querySelectorAll(".tab-content").forEach(function(c) {
-    c.classList.toggle("active", c.id === "panel-" + name);
-  });
-  renderCurrentTab();
-}
-
-// ==================== Events ====================
-
-document.getElementById("sel-snapshot").addEventListener("change", function(e) {
-  if (e.target.value) loadSnapshot(e.target.value);
-});
-
-// Dropdown toggles for tagignore, tagroot, tagleaf
-["tagignore", "tagroot", "tagleaf"].forEach(function(name) {
-  document.getElementById("btn-" + name).addEventListener("click", function(e) {
-    e.stopPropagation();
-    // Close other dropdowns first
-    ["tagignore", "tagroot", "tagleaf"].forEach(function(other) {
-      if (other !== name) document.getElementById("cb-" + other).classList.remove("open");
-    });
-    document.getElementById("cb-" + name).classList.toggle("open");
-  });
-});
-document.addEventListener("click", function(e) {
-  ["tagignore", "tagroot", "tagleaf"].forEach(function(name) {
-    var list = document.getElementById("cb-" + name);
-    if (!list.contains(e.target) && e.target.id !== "btn-" + name) {
-      list.classList.remove("open");
-    }
-  });
-});
-
-document.querySelectorAll(".tab").forEach(function(t) {
-  t.addEventListener("click", function() { switchTab(t.getAttribute("data-tab")); });
-});
-
-var inputs = document.querySelectorAll(".controls input[type=text]");
-for (var i = 0; i < inputs.length; i++) {
-  inputs[i].addEventListener("keydown", function(e) {
-    if (e.key === "Enter") applyAndRender();
-  });
-}
-
-// --- Init ---
-loadSnapshotList();
-</script>
-</body>
-</html>
-  HTML
 end