diff --git a/comparisons/moduleAllocMonitor-circles-diff.py b/comparisons/moduleAllocMonitor-circles-diff.py
index 621842ca03c..1c502c99032 100755
--- a/comparisons/moduleAllocMonitor-circles-diff.py
+++ b/comparisons/moduleAllocMonitor-circles-diff.py
@@ -4,8 +4,28 @@
 import json
 import os
 
-threshold = 5000.0
-error_threshold = 20000.0
+
+def build_viewer_html(template_path, embedded_data, source_label):
+    with open(template_path, encoding="utf-8") as template_file:
+        content = template_file.read()
+
+    embedded_json = json.dumps(embedded_data).replace("</", "<\\/")
+
+    autoload_snippet = """
+    <script>
+        (function () {
+            var embeddedData = %s;
+            if (typeof loadFromObject === "function") {
+                loadFromObject(embeddedData, %s);
+            }
+        })();
+    </script>
+""" % (embedded_json, json.dumps(source_label))
+
+    if "</body>" in content:
+        content = content.replace("</body>", autoload_snippet + "</body>", 1)
+    return content
+
 
 BEGIN_JOB_KEYS = ["begin job"]
 BEGIN_RUN_KEYS = ["global begin run", "stream begin run"]
@@ -28,62 +48,69 @@
 
 
 def module_key(module):
-    return "%s|%s|%s" % (module.get("label", ""), module.get("type", ""), module.get("record", ""))
+    return "%s|%s" % (module.get("label", ""), module.get("type", ""))
 
 
-def numeric_value(data, key, default="N/A"):
-    value = data.get(key, default)
-    return value if isinstance(value, (int, float)) else default
+def module_record(module):
+    record = module.get("record", "")
+    return str(record).strip()
 
 
-def sum_numeric_values(data, keys, default="N/A"):
-    values = [data.get(key, default) for key in keys]
-    return sum(values) if all(isinstance(value, (int, float)) for value in values) else default
+def is_event_setup_metric(metric):
+    return str(metric).strip().lower().endswith(" event setup")
 
 
-def sum_with_prefix_suffix(data, metric_keys, prefix="added", suffix="", default="N/A"):
-    return sum_numeric_values(
-        data, ["%s %s %s" % (prefix, metric, suffix) for metric in metric_keys], default
-    )
+def to_numeric_or_none(value):
+    if isinstance(value, (int, float)):
+        return value
+    if isinstance(value, dict):
+        total_value = value.get("total")
+        if isinstance(total_value, (int, float)):
+            return total_value
+        values = [sub_value for sub_value in value.values() if isinstance(sub_value, (int, float))]
+        return sum(values) if values else None
+    return None
 
 
-def format_metric(value):
-    return f"{value:.2f}" if isinstance(value, float) else str(value)
+def sum_numeric_values(data, keys, default="N/A"):
+    values = [to_numeric_or_none(data.get(key, default)) for key in keys]
+    return sum(values) if all(value is not None for value in values) else default
 
 
-def append_triplet_cell(summary_lines, ib, pr, diff, attrs='align="right"'):
-    summary_lines.append(
-        "<td %s>%s<br>%s<br>%s</td>"
-        % (attrs, format_metric(ib), format_metric(pr), format_metric(diff))
+def sum_with_prefix_suffix(data, metric_keys, prefix="added", suffix="", default="N/A"):
+    return sum_numeric_values(
+        data, ["%s %s %s" % (prefix, metric, suffix) for metric in metric_keys], default
     )
 
 
-def added_total_color(diff_value):
-    if not isinstance(diff_value, (int, float)):
-        return ""
-    if diff_value > error_threshold:
-        return 'bgcolor="red"'
-    if diff_value > threshold:
-        return 'bgcolor="orange"'
-    if diff_value < -1.0 * error_threshold:
-        return 'bgcolor="green"'
-    if diff_value < -1.0 * threshold:
-        return 'bgcolor="cyan"'
-    return ""
-
-
 def is_valid_module_key(key):
     return key != "None|None|None" and key != "||"
 
 
-def transitions_diff_value(transitions_ib, transitions_pr):
-    if isinstance(transitions_ib, (int, float)) and isinstance(transitions_pr, (int, float)):
-        return transitions_ib - transitions_pr
-    if not isinstance(transitions_ib, (int, float)) and isinstance(transitions_pr, (int, float)):
-        return transitions_pr - 0
-    if isinstance(transitions_ib, (int, float)) and not isinstance(transitions_pr, (int, float)):
-        return 0 - transitions_ib
-    return "N/A"
+def compute_event_setup_total(event_setup):
+    total = 0
+    if not isinstance(event_setup, dict):
+        return total
+    for key, value in event_setup.items():
+        if key == "total":
+            continue
+        if isinstance(value, (int, float)):
+            total += value
+        elif isinstance(value, dict):
+            for nested in value.values():
+                if isinstance(nested, (int, float)):
+                    total += nested
+    return total
+
+
+def ensure_event_setup_total(module):
+    for key in ["IB", "PR", "diff"]:
+        for metric in METRICS_KEYS:
+            event_setup = module.get("%s event setup %s" % (metric, key))
+            if not isinstance(event_setup, dict):
+                event_setup = {"total": 0}
+            event_setup["total"] = compute_event_setup_total(event_setup)
+            module["%s event setup %s" % (metric, key)] = event_setup
 
 
 def update_added_totals(datamapres):
@@ -103,267 +130,70 @@ def update_added_totals(datamapres):
             )
 
 
-def build_header_row():
-    return [
-        '<td align="center">added begin job</td>',
-        '<td align="center">added construction</td>',
-        '<td align="center">added begin run</td>',
-        '<td align="center">added begin luminosity block</td>',
-        '<td align="center">added event</td>',
-        '<td align="center">added event setup</td>',
-        '<td align="center">added total</td>',
-        '<td align="center">nAlloc begin job</td>',
-        '<td align="center">nAlloc construction</td>',
-        '<td align="center">nAlloc begin run</td>',
-        '<td align="center">nAlloc begin luminosity block</td>',
-        '<td align="center">nAlloc event</td>',
-        '<td align="center">nAlloc event setup</td>',
-        '<td align="center">nAlloc total</td>',
-        '<td align="center">nDealloc begin job</td>',
-        '<td align="center">nDealloc construction</td>',
-        '<td align="center">nDealloc begin run</td>',
-        '<td align="center">nDealloc begin luminosity block</td>',
-        '<td align="center">nDealloc event</td>',
-        '<td align="center">nDealloc event setup</td>',
-        '<td align="center">nDealloc total</td>',
-        '<td align="center">maxTemp begin job</td>',
-        '<td align="center">maxTemp construction</td>',
-        '<td align="center">maxTemp begin run</td>',
-        '<td align="center">maxTemp begin luminosity block</td>',
-        '<td align="center">maxTemp event</td>',
-        '<td align="center">maxTemp event setup</td>',
-        '<td align="center">maxTemp total</td>',
-        '<td align="center">max1Alloc begin job</td>',
-        '<td align="center">max1Alloc construction</td>',
-        '<td align="center">max1Alloc begin run</td>',
-        '<td align="center">max1Alloc begin luminosity block</td>',
-        '<td align="center">max1Alloc event</td>',
-        '<td align="center">max1Alloc event setup</td>',
-        '<td align="center">max1Alloc total</td>',
-    ]
-
-
-def build_summary_header(ibdata, prdata, results):
-    summary_header = [
-        "<html>",
-        "<head><style>",
-        "table, th, td {border: 1px solid black;}</style>",
-        "<style> th, td {padding: 15px;}</style></head>",
-        "<body><h3>ModuleAllocMonitor Resources Difference</h3><table>",
-        '</table><table><tr><td bgcolor="orange">',
-        "warn threshold %0.2f kB" % threshold,
-        '</td></tr><tr><td bgcolor="red">',
-        "error threshold %0.2f kB" % error_threshold,
-        '</td></tr><tr><td bgcolor="green">',
-        "warn threshold -%0.2f kB" % threshold,
-        '</td></tr><tr><td bgcolor="cyan">',
-        "warn threshold -%0.2f kB" % error_threshold,
-        "</td></tr>",
-        "<tr><td>metric:<BR>&lt;baseline&gt;<BR>&lt;pull request&gt;<BR>&lt;PR - baseline&gt; </td>",
-        "</tr></table>",
-        "<table>",
-        '<tr><td align="center">Type<BR>Label</td>',
-    ]
-    summary_header += build_header_row()
-    summary_header += [
-        "</tr>",
-        "<tr>",
-        "<td>%s<BR>%s</td>" % (prdata["total"]["type"], prdata["total"]["label"]),
-    ]
-    for metric in METRICS_KEYS:
-        append_triplet_cell(
-            summary_header,
-            sum_numeric_values(
-                results["total"], ["%s %s IB" % (metric, key) for key in BEGIN_JOB_KEYS]
-            ),
-            sum_numeric_values(
-                results["total"], ["%s %s PR" % (metric, key) for key in BEGIN_JOB_KEYS]
-            ),
-            sum_numeric_values(
-                results["total"], ["%s %s diff" % (metric, key) for key in BEGIN_JOB_KEYS]
-            ),
-        )
-        append_triplet_cell(
-            summary_header,
-            sum_numeric_values(
-                results["total"], ["%s %s IB" % (metric, key) for key in CONSTRUCTION_KEYS]
-            ),
-            sum_numeric_values(
-                results["total"], ["%s %s PR" % (metric, key) for key in CONSTRUCTION_KEYS]
-            ),
-            sum_numeric_values(
-                results["total"], ["%s %s diff" % (metric, key) for key in CONSTRUCTION_KEYS]
-            ),
-        )
-        append_triplet_cell(
-            summary_header,
-            sum_numeric_values(
-                results["total"], ["%s %s IB" % (metric, key) for key in BEGIN_RUN_KEYS]
-            ),
-            sum_numeric_values(
-                results["total"], ["%s %s PR" % (metric, key) for key in BEGIN_RUN_KEYS]
-            ),
-            sum_numeric_values(
-                results["total"], ["%s %s diff" % (metric, key) for key in BEGIN_RUN_KEYS]
-            ),
-        )
-        append_triplet_cell(
-            summary_header,
-            sum_numeric_values(
-                results["total"], ["%s %s IB" % (metric, key) for key in BEGIN_LUMI_KEYS]
-            ),
-            sum_numeric_values(
-                results["total"], ["%s %s PR" % (metric, key) for key in BEGIN_LUMI_KEYS]
-            ),
-            sum_numeric_values(
-                results["total"], ["%s %s diff" % (metric, key) for key in BEGIN_LUMI_KEYS]
-            ),
-        )
-        append_triplet_cell(
-            summary_header,
-            sum_numeric_values(
-                results["total"], ["%s %s IB" % (metric, key) for key in EVENT_KEYS]
-            ),
-            sum_numeric_values(
-                results["total"], ["%s %s PR" % (metric, key) for key in EVENT_KEYS]
-            ),
-            sum_numeric_values(
-                results["total"], ["%s %s diff" % (metric, key) for key in EVENT_KEYS]
-            ),
-        )
-        append_triplet_cell(
-            summary_header,
-            sum_numeric_values(
-                results["total"], ["%s %s IB" % (metric, key) for key in EVENT_SETUP_KEYS]
-            ),
-            sum_numeric_values(
-                results["total"], ["%s %s PR" % (metric, key) for key in EVENT_SETUP_KEYS]
-            ),
-            sum_numeric_values(
-                results["total"], ["%s %s diff" % (metric, key) for key in EVENT_SETUP_KEYS]
-            ),
-        )
-        append_triplet_cell(
-            summary_header,
-            sum_numeric_values(
-                results["total"], ["%s %s IB" % (metric, key) for key in TOTAL_KEYS]
-            ),
-            sum_numeric_values(
-                results["total"], ["%s %s PR" % (metric, key) for key in TOTAL_KEYS]
-            ),
-            sum_numeric_values(
-                results["total"], ["%s %s diff" % (metric, key) for key in TOTAL_KEYS]
-            ),
-        )
-    summary_header += [
-        "</tr></table>",
-        '<table style="width: 100%"><tr><td align="center">Module label<BR>Module type<BR>Module record</td>',
-    ]
-    summary_header += build_header_row()
-    summary_header += [
-        '<td align="center">transitions</td>',
-        "</tr>",
-    ]
-    return summary_header
-
-
-def append_module_columns_prefix(summary_lines, moduleres, prefix):
-    cell_attrs = 'align="right"'
-    if prefix == "added":
-        addedtotaldiff = numeric_value(moduleres, "added total diff", float("-inf"))
-        color = added_total_color(addedtotaldiff)
-        if color:
-            cell_attrs += " " + color
-    append_triplet_cell(
-        summary_lines,
-        sum_with_prefix_suffix(moduleres, BEGIN_JOB_KEYS, prefix=prefix, suffix="IB"),
-        sum_with_prefix_suffix(moduleres, BEGIN_JOB_KEYS, prefix=prefix, suffix="PR"),
-        sum_with_prefix_suffix(moduleres, BEGIN_JOB_KEYS, prefix=prefix, suffix="diff"),
-    )
-    append_triplet_cell(
-        summary_lines,
-        sum_with_prefix_suffix(moduleres, CONSTRUCTION_KEYS, prefix=prefix, suffix="IB"),
-        sum_with_prefix_suffix(moduleres, CONSTRUCTION_KEYS, prefix=prefix, suffix="PR"),
-        sum_with_prefix_suffix(moduleres, CONSTRUCTION_KEYS, prefix=prefix, suffix="diff"),
-    )
-    append_triplet_cell(
-        summary_lines,
-        sum_with_prefix_suffix(moduleres, BEGIN_RUN_KEYS, prefix=prefix, suffix="IB"),
-        sum_with_prefix_suffix(moduleres, BEGIN_RUN_KEYS, prefix=prefix, suffix="PR"),
-        sum_with_prefix_suffix(moduleres, BEGIN_RUN_KEYS, prefix=prefix, suffix="diff"),
-    )
-    append_triplet_cell(
-        summary_lines,
-        sum_with_prefix_suffix(moduleres, BEGIN_LUMI_KEYS, prefix=prefix, suffix="IB"),
-        sum_with_prefix_suffix(moduleres, BEGIN_LUMI_KEYS, prefix=prefix, suffix="PR"),
-        sum_with_prefix_suffix(moduleres, BEGIN_LUMI_KEYS, prefix=prefix, suffix="diff"),
-    )
-    append_triplet_cell(
-        summary_lines,
-        sum_with_prefix_suffix(moduleres, EVENT_KEYS, prefix=prefix, suffix="IB"),
-        sum_with_prefix_suffix(moduleres, EVENT_KEYS, prefix=prefix, suffix="PR"),
-        sum_with_prefix_suffix(moduleres, EVENT_KEYS, prefix=prefix, suffix="diff"),
-    )
-    append_triplet_cell(
-        summary_lines,
-        sum_with_prefix_suffix(moduleres, EVENT_SETUP_KEYS, prefix=prefix, suffix="IB"),
-        sum_with_prefix_suffix(moduleres, EVENT_SETUP_KEYS, prefix=prefix, suffix="PR"),
-        sum_with_prefix_suffix(moduleres, EVENT_SETUP_KEYS, prefix=prefix, suffix="diff"),
-    )
-    append_triplet_cell(
-        summary_lines,
-        sum_with_prefix_suffix(moduleres, TOTAL_KEYS, prefix=prefix, suffix="IB"),
-        sum_with_prefix_suffix(moduleres, TOTAL_KEYS, prefix=prefix, suffix="PR"),
-        sum_with_prefix_suffix(moduleres, TOTAL_KEYS, prefix=prefix, suffix="diff"),
-        attrs=cell_attrs,
-    )
-
-
-def append_module_rows(summary_lines, moduleib, modulepr, moduleres):
-    summary_lines += [
-        "<tr>",
-        '<td align="center">%s<BR>%s<BR> %s</td>'
-        % (moduleres.get("label", ""), moduleres.get("type", ""), moduleres.get("record", "")),
-    ]
-    for metric in METRICS_KEYS:
-        append_module_columns_prefix(summary_lines, moduleres, metric)
-    transitions_ib = numeric_value(moduleib, "transitions")
-    transitions_pr = numeric_value(modulepr, "transitions")
-    transitions_diff = transitions_diff_value(transitions_ib, transitions_pr)
-    append_triplet_cell(summary_lines, transitions_ib, transitions_pr, transitions_diff)
-    summary_lines += ["</tr>"]
-
-
-def append_sorted_module_rows(summary_lines, datamapib, datamappr, datamapres):
-    for item in sorted(
-        datamapres.items(),
-        key=lambda x: numeric_value(x[1], "added total diff", float("-inf")),
-        reverse=True,
-    ):
-        key = module_key(item[1])
-        if not is_valid_module_key(key):
-            continue
-        moduleib = datamapib.get(key, {})
-        modulepr = datamappr.get(key, {})
-        moduleres = datamapres.get(key, {})
-        append_module_rows(summary_lines, moduleib, modulepr, moduleres)
-
+def merge_modules_by_key(modules, metrics):
+    merged = {}
+    for module in modules:
+        key = module_key(module)
+        if key not in merged:
+            merged[key] = {
+                "type": module.get("type"),
+                "label": module.get("label"),
+                "event setup": {"total": 0},
+            }
+        dest = merged[key]
+        record = module_record(module)
+        if record:
+            dest["event setup"].setdefault(record, {})
 
-def build_summary_lines(ibdata, prdata, results, datamapib, datamappr, datamapres):
-    summary_lines = build_summary_header(ibdata, prdata, results)
-    update_added_totals(datamapres)
-    append_sorted_module_rows(summary_lines, datamapib, datamappr, datamapres)
-    summary_lines += ["</body></html>"]
-    return summary_lines
+        for metric in metrics:
+            value = module.get(metric, "N/A")
+            if is_event_setup_metric(metric):
+                metric_map = dest.get(metric)
+                if not isinstance(metric_map, dict):
+                    metric_map = {}
+                    dest[metric] = metric_map
+                rec_key = record if record else "total"
+                metric_map[rec_key] = value
+
+                if record and isinstance(value, (int, float)):
+                    dest["event setup"][record][metric] = value
+            elif isinstance(value, (int, float)):
+                dest[metric] = dest.get(metric, 0) + value
+            elif metric not in dest:
+                dest[metric] = value
+    return merged
 
 
 def diff_from(metrics, data, dest, res):
+    def diff_dictionary_values(ib_values, pr_values):
+        records = sorted(set(ib_values.keys()) | set(pr_values.keys()))
+        diff_values = {}
+        for record in records:
+            ib_value = ib_values.get(record, "N/A")
+            pr_value = pr_values.get(record, "N/A")
+            if isinstance(ib_value, (int, float)) and isinstance(pr_value, (int, float)):
+                diff_values[record] = pr_value - ib_value
+            elif isinstance(pr_value, (int, float)):
+                diff_values[record] = pr_value
+            elif isinstance(ib_value, (int, float)):
+                diff_values[record] = -ib_value
+            else:
+                diff_values[record] = "N/A"
+        return diff_values
+
     for metric in metrics:
         ibkey = "%s IB" % metric
-        res[ibkey] = data.get(metric, "N/A")
+        ibvalue = data.get(metric, "N/A")
+        res[ibkey] = ibvalue
         prkey = "%s PR" % metric
-        res[prkey] = dest.get(metric, "N/A")
-        if res[ibkey] == "N/A" or res[prkey] == "N/A":
+        prvalue = dest.get(metric, "N/A")
+        res[prkey] = prvalue
+
+        if isinstance(ibvalue, dict) or isinstance(prvalue, dict):
+            ibdict = ibvalue if isinstance(ibvalue, dict) else {}
+            prdict = prvalue if isinstance(prvalue, dict) else {}
+            res[metric + " diff"] = diff_dictionary_values(ibdict, prdict)
+        elif res[ibkey] == "N/A" or res[prkey] == "N/A":
             if res[prkey] != "N/A":
                 res[metric + " diff"] = res[prkey] - 0
             elif res[ibkey] != "N/A":
@@ -389,7 +219,7 @@ def diff_from(metrics, data, dest, res):
         for key in resource:
             metrics.append(key)
 
-datamapib = {module_key(module): module for module in ibdata["modules"]}
+datamapib = merge_modules_by_key(ibdata["modules"], metrics)
 
 datacumulsib = {}
 for module in ibdata["modules"]:
@@ -411,7 +241,7 @@ def diff_from(metrics, data, dest, res):
     print("Error: input files describe different metrics")
     sys.exit(1)
 
-datamappr = {module_key(module): module for module in prdata["modules"]}
+datamappr = merge_modules_by_key(prdata["modules"], metrics)
 
 
 if ibdata["total"]["label"] != prdata["total"]["label"]:
@@ -448,26 +278,24 @@ def diff_from(metrics, data, dest, res):
     if key in datamapib and key not in datamappr:
         result["type"] = datamapib.get(key).get("type")
         result["label"] = datamapib.get(key).get("label")
-        result["record"] = datamapib.get(key).get("record")
         diff_from(metrics, datamapib.get(key, {}), {}, result)
     elif key in datamappr and key not in datamapib:
         result["type"] = datamappr.get(key).get("type")
         result["label"] = datamappr.get(key).get("label")
-        result["record"] = datamappr.get(key).get("record")
         diff_from(metrics, {}, datamappr.get(key, {}), result)
     else:
         result["type"] = datamappr.get(key).get("type")
         result["label"] = datamappr.get(key).get("label")
-        result["record"] = datamappr.get(key).get("record")
         diff_from(metrics, datamapib.get(key, {}), datamappr.get(key, {}), result)
+    ensure_event_setup_total(result)
     results["modules"].append(result)
 
 datamapres = {}
 for module in results["modules"]:
     datamapres[module_key(module)] = module
 
+update_added_totals(datamapres)
 
-summaryLines = build_summary_lines(ibdata, prdata, results, datamapib, datamappr, datamapres)
 dumpfile = (
     os.path.dirname(os.path.realpath(sys.argv[2]))
     + "/diff-"
@@ -482,6 +310,13 @@ def diff_from(metrics, data, dest, res):
     + os.path.basename(os.path.realpath(sys.argv[2]))
     + ".html"
 )
-with open(summaryFile, "w") as g:
-    for summaryLine in summaryLines:
-        print(summaryLine, file=g)
+
+templateFile = os.path.join(
+    os.path.dirname(os.path.realpath(__file__)), "module_alloc_monitor_viewer.html"
+)
+summaryHtml = build_viewer_html(
+    template_path=templateFile, embedded_data=results, source_label="embedded diff data"
+)
+
+with open(summaryFile, "w", encoding="utf-8") as g:
+    g.write(summaryHtml)
diff --git a/comparisons/module_alloc_monitor_viewer.html b/comparisons/module_alloc_monitor_viewer.html
new file mode 100644
index 00000000000..6f6ae38360b
--- /dev/null
+++ b/comparisons/module_alloc_monitor_viewer.html
@@ -0,0 +1,1415 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <title>Module Allocation Monitor Viewer</title>
+
+  <style>
+    :root {
+      --bg: #f4efe6;
+      --ink: #1d232a;
+      --ink-soft: #4a525c;
+      --paper: #fffaf3;
+      --card: #fffdf8;
+      --line: #dacfbf;
+      --accent: #0e8f7a;
+      --accent-soft: #a4ddd5;
+      --up: #0b8a6a;
+      --down: #c53d20;
+      --shadow: 0 10px 30px rgba(35, 41, 48, 0.12);
+      --radius: 16px;
+    }
+
+    * {
+      box-sizing: border-box;
+    }
+
+    body {
+      margin: 0;
+      color: var(--ink);
+      font-family: system-ui, sans-serif;
+      background:
+        radial-gradient(circle at 8% 20%, #ffe7b8 0%, transparent 33%),
+        radial-gradient(circle at 85% 10%, #cdeef4 0%, transparent 40%),
+        linear-gradient(140deg, #efe6d6 0%, #f4efe6 100%);
+      min-height: 100vh;
+    }
+
+    .wrap {
+      width: 100%;
+      margin: 0;
+      padding: 1rem;
+      display: grid;
+      gap: 1rem;
+    }
+
+    .panel {
+      background: var(--paper);
+      border: 1px solid var(--line);
+      border-radius: var(--radius);
+      box-shadow: var(--shadow);
+      overflow: hidden;
+    }
+
+    .hero {
+      padding: 1.2rem 1.2rem 1.4rem;
+      position: relative;
+      isolation: isolate;
+    }
+
+    .hero::after {
+      content: "";
+      position: absolute;
+      inset: auto -40px -45px auto;
+      width: 180px;
+      height: 180px;
+      border-radius: 40px;
+      transform: rotate(22deg);
+      background: linear-gradient(135deg, #9adfd2, #f6d9a3);
+      opacity: 0.45;
+      z-index: -1;
+    }
+
+    h1 {
+      margin: 0;
+      font-size: clamp(1.4rem, 2.2vw, 2rem);
+      letter-spacing: 0.01em;
+    }
+
+    .sub {
+      margin: 0.45rem 0 0;
+      color: var(--ink-soft);
+      font-size: 0.95rem;
+    }
+
+    .controls {
+      padding: 1rem 1.2rem 1.2rem;
+      display: grid;
+      gap: 0.8rem;
+      border-top: 1px solid var(--line);
+      background: color-mix(in oklab, var(--paper), #ffffff 25%);
+    }
+
+    .grid {
+      display: grid;
+      gap: 0.7rem;
+      grid-template-columns: repeat(6, minmax(120px, 1fr));
+    }
+
+    .grid > * {
+      min-width: 0;
+    }
+
+    .row-break {
+      grid-column: 1 / -1;
+      height: 0;
+      padding: 0;
+      margin: 0;
+    }
+
+    label {
+      display: block;
+      font-size: 0.8rem;
+      color: var(--ink-soft);
+      margin-bottom: 0.25rem;
+      font-weight: 500;
+    }
+
+    input[type="text"],
+    input[type="number"],
+    select,
+    button {
+      width: 100%;
+      font-family: inherit;
+      font-size: 0.92rem;
+      border-radius: 10px;
+      border: 1px solid #c7bcae;
+      padding: 0.55rem 0.65rem;
+      background: #fff;
+      color: var(--ink);
+    }
+
+    input[type="file"] {
+      width: 100%;
+      font-size: 0.86rem;
+      color: var(--ink-soft);
+    }
+
+    button {
+      cursor: pointer;
+      background: linear-gradient(180deg, #fdfefe, #edf9f6);
+      border-color: #a9cfc8;
+      font-weight: 600;
+    }
+
+    button:hover {
+      filter: brightness(0.98);
+    }
+
+    .dropzone {
+      border: 1.5px dashed #86b9af;
+      border-radius: 12px;
+      padding: 0.75rem;
+      text-align: center;
+      color: var(--ink-soft);
+      background: #f5fcfa;
+      transition: 150ms ease;
+    }
+
+    .dropzone-inline {
+      grid-column: 4 / -1;
+      min-height: 46px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .dropzone.drag {
+      border-color: var(--accent);
+      background: #def4ef;
+      color: #1d4039;
+      transform: translateY(-1px);
+    }
+
+    .stats {
+      display: grid;
+      gap: 0.8rem;
+      grid-template-columns: repeat(4, minmax(120px, 1fr));
+      padding: 1rem 1.2rem;
+      border-top: 1px solid var(--line);
+      background: color-mix(in oklab, var(--paper), #ffffff 35%);
+    }
+
+    .stat {
+      background: var(--card);
+      border: 1px solid #ddd1c1;
+      border-radius: 12px;
+      padding: 0.7rem 0.8rem;
+    }
+
+    .stat .k {
+      color: var(--ink-soft);
+      font-size: 0.75rem;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+    }
+
+    .stat .v {
+      margin-top: 0.25rem;
+      font-size: 1.15rem;
+      font-weight: 700;
+      font-family: monospace;
+    }
+
+    .table-wrap {
+      padding: 0 1.2rem 1.2rem;
+    }
+
+    .table-scroller {
+      overflow: auto;
+      border: 1px solid var(--line);
+      border-radius: 12px;
+      background: #fff;
+      max-height: 100%;
+    }
+
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      min-width: 920px;
+      font-size: 0.88rem;
+    }
+
+    thead th {
+      position: sticky;
+      top: 0;
+      background: #f4f8f7;
+      text-align: left;
+      border-bottom: 1px solid var(--line);
+      color: #2d3a3f;
+      font-weight: 700;
+      padding: 0.6rem 0.7rem;
+      z-index: 2;
+    }
+
+    thead th.sortable {
+      cursor: pointer;
+      user-select: none;
+    }
+
+    thead th.sortable:hover {
+      background: #ebf3f1;
+    }
+
+    tbody td {
+      border-bottom: 1px solid #efe4d5;
+      padding: 0.48rem 0.7rem;
+      vertical-align: top;
+    }
+
+    tbody tr:hover {
+      background: #faf5ec;
+    }
+
+    tbody tr.expandable {
+      cursor: pointer;
+    }
+
+    tbody tr.expanded {
+      background: #f2faf8;
+    }
+
+    .expand-icon {
+      display: inline-block;
+      width: 1.1em;
+      color: #3f5d5a;
+      font-size: 0.8em;
+    }
+
+    .detail-row td {
+      background: #fff8ee;
+      border-bottom: 1px solid #e8d9c4;
+      padding: 0;
+    }
+
+    .detail-wrap {
+      padding: 0.65rem 0.8rem 0.8rem;
+    }
+
+    .detail-title {
+      margin: 0 0 0.45rem;
+      font-size: 0.78rem;
+      color: var(--ink-soft);
+      letter-spacing: 0.02em;
+      text-transform: uppercase;
+    }
+
+    .detail-table {
+      width: 100%;
+      min-width: 0;
+      border-collapse: collapse;
+      font-size: 0.82rem;
+    }
+
+    .detail-table th,
+    .detail-table td {
+      border-bottom: 1px solid #eddcc6;
+      padding: 0.35rem 0.45rem;
+      text-align: left;
+    }
+
+    .detail-table th {
+      background: #f9efe1;
+      color: #374247;
+      position: static;
+    }
+
+    .mono {
+      font-family: monospace;
+      white-space: nowrap;
+    }
+
+    td.mono {
+      text-align: right;
+      font-variant-numeric: tabular-nums;
+    }
+
+    .pill {
+      display: inline-block;
+      border-radius: 999px;
+      background: #e7f5f2;
+      border: 1px solid #c2dfd8;
+      color: #19574c;
+      padding: 0.15rem 0.5rem;
+      font-size: 0.74rem;
+      line-height: 1.2;
+    }
+
+    .bar-cell {
+      min-width: 180px;
+    }
+
+    .bar-track {
+      position: relative;
+      height: 10px;
+      border-radius: 999px;
+      background: #f0e7dc;
+      overflow: hidden;
+    }
+
+    .bar-fill {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 50%;
+      width: 0;
+      transform: translateX(-50%);
+      border-radius: 999px;
+    }
+
+    .up {
+      background: linear-gradient(90deg, #e67f67, #c53d20);
+    }
+
+    .down {
+      background: linear-gradient(90deg, #41bd97, #0b8a6a);
+    }
+
+    .pager {
+      padding: 0.75rem 0;
+      display: flex;
+      gap: 0.6rem;
+      align-items: center;
+      flex-wrap: wrap;
+      color: var(--ink-soft);
+      font-size: 0.86rem;
+    }
+
+    .pager button {
+      width: auto;
+      min-width: 76px;
+      padding: 0.45rem 0.75rem;
+    }
+
+    .empty {
+      padding: 1.2rem;
+      color: var(--ink-soft);
+    }
+
+    .error {
+      color: #8d2f1f;
+      font-weight: 600;
+    }
+
+    @media (max-width: 980px) {
+      .row-break {
+        display: none;
+      }
+
+      .dropzone-inline {
+        grid-column: 1 / -1;
+      }
+
+      .grid {
+        grid-template-columns: repeat(2, minmax(140px, 1fr));
+      }
+
+      .stats {
+        grid-template-columns: repeat(2, minmax(100px, 1fr));
+      }
+    }
+
+    @media (max-width: 560px) {
+      .wrap {
+        padding: 0.75rem;
+      }
+
+      .grid,
+      .stats {
+        grid-template-columns: 1fr;
+      }
+    }
+  </style>
+</head>
+<body>
+  <main class="wrap">
+    <section class="panel">
+      <div class="hero">
+        <h1>Module Allocation Monitor Viewer</h1>
+        <p class="sub">Inspect module-level metrics from moduleAllocMonitor circles JSON files.</p>
+      </div>
+
+      <div class="controls">
+        <div class="grid">
+          <div>
+            <label for="fileInput">Load JSON file</label>
+            <input id="fileInput" type="file" accept=".json,application/json">
+          </div>
+          <div>
+            <label for="defaultFile">Auto-load file name</label>
+            <input id="defaultFile" type="text" value="">
+          </div>
+          <div>
+            <label>&nbsp;</label>
+            <button id="autoLoadBtn" type="button">Try Auto-Load</button>
+          </div>
+          <div id="dropzone" class="dropzone dropzone-inline">Drag and drop a JSON file here</div>
+          <div class="row-break" aria-hidden="true"></div>
+          <div>
+            <label for="search">Search label/type</label>
+            <input id="search" type="text" placeholder="e.g. JetMonitor or PromptMonitoring">
+          </div>
+          <div>
+            <label for="typeFilter">Filter type</label>
+            <select id="typeFilter"></select>
+          </div>
+          <div>
+            <label for="quantitySelect">Quantity</label>
+            <select id="quantitySelect"></select>
+          </div>
+          <div>
+            <label for="metricSelect">Transition</label>
+            <select id="metricSelect"></select>
+          </div>
+          <div>
+            <label for="sortBy">Sort</label>
+            <select id="sortBy">
+              <option value="abs-desc">Abs(diff) high to low</option>
+              <option value="label-asc">Label A to Z</option>
+              <option value="label-desc">Label Z to A</option>
+              <option value="type-asc">Type A to Z</option>
+              <option value="type-desc">Type Z to A</option>
+              <option value="record-asc">Record low to high</option>
+              <option value="record-desc">Record high to low</option>
+              <option value="ib-desc">IB high to low</option>
+              <option value="ib-asc">IB low to high</option>
+              <option value="pr-desc">PR high to low</option>
+              <option value="pr-asc">PR low to high</option>
+              <option value="metric-desc">Diff high to low</option>
+              <option value="metric-asc">Diff low to high</option>
+            </select>
+          </div>
+          <div>
+            <label for="minAbs">Min abs(diff)</label>
+            <input id="minAbs" type="number" step="any" value="0">
+          </div>
+          <div>
+            <label for="rowsPerPage">Rows per page</label>
+            <input id="rowsPerPage" type="number" min="10" step="10" value="100">
+          </div>
+        </div>
+        <div id="status" class="sub">No data loaded yet.</div>
+      </div>
+
+      <div class="stats">
+        <div class="stat"><div class="k">Modules</div><div id="statModules" class="v">0</div></div>
+        <div class="stat"><div class="k">Types</div><div id="statTypes" class="v">0</div></div>
+        <div class="stat"><div class="k">Diff Mean</div><div id="statMean" class="v">0</div></div>
+        <div class="stat"><div class="k">Max |Diff|</div><div id="statMaxAbs" class="v">0</div></div>
+      </div>
+
+      <div class="table-wrap">
+        <div class="pager">
+          <button id="prevBtn" type="button">Prev</button>
+          <button id="nextBtn" type="button">Next</button>
+          <span id="pageInfo">Page 0/0</span>
+        </div>
+
+        <div class="table-scroller">
+          <table>
+            <thead>
+              <tr>
+                <th id="colLabel" class="sortable" style="width: 25%;">Label</th>
+                <th id="colType" class="sortable" style="width: 12%;">Type</th>
+                <th id="colRecord" class="sortable" style="width: 10%;">Record</th>
+                <th id="colIB" class="sortable" style="width: 14%;">IB</th>
+                <th id="colPR" class="sortable" style="width: 14%;">PR</th>
+                <th id="colDiff" class="sortable" style="width: 14%;">diff</th>
+                <th style="width: 10%;">Visual</th>
+              </tr>
+            </thead>
+            <tbody id="tbody"></tbody>
+          </table>
+          <div id="empty" class="empty">Load a JSON file to begin.</div>
+        </div>
+      </div>
+    </section>
+  </main>
+
+  <script>
+    const state = {
+      modules: [],
+      filtered: [],
+      fieldGroupsByQuantity: {},
+      quantityUnits: {},
+      quantities: [],
+      expandedRows: new Set(),
+      eventSetupSort: { column: "key", direction: "asc" },
+      page: 1,
+      maxAbsMetric: 1,
+      fileName: ""
+    };
+
+    const QUANTITY_ORDER = ["added", "nAlloc", "nDealloc", "max1Alloc", "maxTemp"];
+    const TRANSITION_ORDER = [
+      "construction",
+      "begin job",
+      "begin stream",
+      "global begin run",
+      "stream begin run",
+      "global begin luminosity block",
+      "stream begin luminosity block",
+      "event",
+      "event setup",
+    ];
+
+    const el = {
+      fileInput: document.getElementById("fileInput"),
+      defaultFile: document.getElementById("defaultFile"),
+      autoLoadBtn: document.getElementById("autoLoadBtn"),
+      search: document.getElementById("search"),
+      typeFilter: document.getElementById("typeFilter"),
+      quantitySelect: document.getElementById("quantitySelect"),
+      metricSelect: document.getElementById("metricSelect"),
+      sortBy: document.getElementById("sortBy"),
+      minAbs: document.getElementById("minAbs"),
+      rowsPerPage: document.getElementById("rowsPerPage"),
+      dropzone: document.getElementById("dropzone"),
+      status: document.getElementById("status"),
+      statModules: document.getElementById("statModules"),
+      statTypes: document.getElementById("statTypes"),
+      statMean: document.getElementById("statMean"),
+      statMaxAbs: document.getElementById("statMaxAbs"),
+      colLabel: document.getElementById("colLabel"),
+      colType: document.getElementById("colType"),
+      colRecord: document.getElementById("colRecord"),
+      colIB: document.getElementById("colIB"),
+      colPR: document.getElementById("colPR"),
+      colDiff: document.getElementById("colDiff"),
+      tbody: document.getElementById("tbody"),
+      empty: document.getElementById("empty"),
+      prevBtn: document.getElementById("prevBtn"),
+      nextBtn: document.getElementById("nextBtn"),
+      pageInfo: document.getElementById("pageInfo")
+    };
+
+    function fmtNumber(value, quantity) {
+      if (value === null || value === undefined || Number.isNaN(value)) {
+        return "-";
+      }
+      return value.toLocaleString(undefined, {
+        maximumFractionDigits: 1
+      });
+    }
+
+    function metricNumber(value) {
+      const numeric = Number(value);
+      if (Number.isFinite(numeric)) {
+        return numeric;
+      }
+      if (value && typeof value === "object") {
+        const total = Number(value.total);
+        if (Number.isFinite(total)) {
+          return total;
+        }
+      }
+      return NaN;
+    }
+
+    function toNumber(val) {
+      const n = metricNumber(val);
+      return Number.isFinite(n) ? n : 0;
+    }
+
+    function escapeHtml(value) {
+      return String(value ?? "")
+        .replaceAll("&", "&amp;")
+        .replaceAll("<", "&lt;")
+        .replaceAll(">", "&gt;")
+        .replaceAll('"', "&quot;")
+        .replaceAll("'", "&#39;");
+    }
+
+    function rowKey(row) {
+      return `${row.label || ""}|${row.type || ""}|${row.record || ""}`;
+    }
+
+    function metricDisplayValue(row, key, quantity) {
+      if (!Object.prototype.hasOwnProperty.call(row, key)) {
+        return "-";
+      }
+      const value = metricNumber(row[key]);
+      return Number.isFinite(value) ? fmtNumber(value, quantity) : "-";
+    }
+
+    function buildExpandedMetricsRows(row, quantity) {
+      const rows = [];
+      const groups = state.fieldGroupsByQuantity[quantity] || [];
+      const hasRecord = row.record !== undefined && row.record !== null && String(row.record).trim() !== "";
+      for (const group of groups) {
+          const groupLower = String(group).toLowerCase();
+          const fieldBase = group === "(none)" ? quantity : `${quantity} ${group}`;
+          const ibKey = `${fieldBase} IB`;
+          const prKey = `${fieldBase} PR`;
+          const diffKey = `${fieldBase} diff`;
+          const hasEventSetupDictionary =
+            groupLower === "event setup" &&
+            [row[ibKey], row[prKey], row[diffKey]].some((value) => {
+              return value && typeof value === "object" && Object.prototype.hasOwnProperty.call(value, "total");
+            });
+          const keepEventSetupTotalRow = groupLower === "event setup" && (hasRecord || hasEventSetupDictionary);
+          if (groupLower === "total") {
+            continue;
+          }
+          if (hasRecord) {
+            if (groupLower !== "event setup") {
+              continue;
+            }
+          } else if (groupLower === "event setup" && !hasEventSetupDictionary) {
+            continue;
+          }
+          const hasIB = Object.prototype.hasOwnProperty.call(row, ibKey);
+          const hasPR = Object.prototype.hasOwnProperty.call(row, prKey);
+          const hasDiff = Object.prototype.hasOwnProperty.call(row, diffKey);
+          const hasAny = hasIB || hasPR || hasDiff;
+          if (!hasAny) {
+            continue;
+          }
+          const ibValue = metricNumber(row[ibKey]);
+          const prValue = metricNumber(row[prKey]);
+          const diffValue = metricNumber(row[diffKey]);
+          const hasNumericIB = hasIB && Number.isFinite(ibValue);
+          const hasNumericPR = hasPR && Number.isFinite(prValue);
+          const hasNumericDiff = hasDiff && Number.isFinite(diffValue);
+          const missingOrNonNumericCount =
+            (hasNumericIB ? 0 : 1) +
+            (hasNumericPR ? 0 : 1) +
+            (hasNumericDiff ? 0 : 1);
+          const presentNumericValues = [];
+          if (hasNumericIB) {
+            presentNumericValues.push(ibValue);
+          }
+          if (hasNumericPR) {
+            presentNumericValues.push(prValue);
+          }
+          if (hasNumericDiff) {
+            presentNumericValues.push(diffValue);
+          }
+          const missingAndRemainingZero =
+            missingOrNonNumericCount > 0 &&
+            presentNumericValues.length > 0 &&
+            presentNumericValues.every((v) => v === 0);
+          if (missingAndRemainingZero && !keepEventSetupTotalRow) {
+            continue;
+          }
+          const allZero =
+            Number.isFinite(ibValue) &&
+            Number.isFinite(prValue) &&
+            Number.isFinite(diffValue) &&
+            ibValue === 0 &&
+            prValue === 0 &&
+            diffValue === 0;
+          if (allZero) {
+            continue;
+          }
+          rows.push(
+            `<tr><td>${escapeHtml(quantity)}</td><td>${escapeHtml(group)}</td><td class="mono">${metricDisplayValue(row, ibKey, quantity)}</td><td class="mono">${metricDisplayValue(row, prKey, quantity)}</td><td class="mono">${metricDisplayValue(row, diffKey, quantity)}</td></tr>`
+          );
+        }
+      if (!rows.length) {
+        return '<tr><td colspan="7" class="mono">No transition details available.</td></tr>';
+      }
+      return rows.join("");
+    }
+
+    function eventSetupEntries(value) {
+      if (!value || typeof value !== "object") {
+        return null;
+      }
+      const keys = Object.keys(value).filter((k) => k !== "total");
+      if (!keys.length) {
+        return null;
+      }
+      return keys;
+    }
+
+    function buildEventSetupDetailTable(row, quantity) {
+      const ibKey = `${quantity} event setup IB`;
+      const prKey = `${quantity} event setup PR`;
+      const diffKey = `${quantity} event setup diff`;
+      const ibMap = row[ibKey] && typeof row[ibKey] === "object" ? row[ibKey] : null;
+      const prMap = row[prKey] && typeof row[prKey] === "object" ? row[prKey] : null;
+      const diffMap = row[diffKey] && typeof row[diffKey] === "object" ? row[diffKey] : null;
+
+      const keySet = new Set();
+      [ibMap, prMap, diffMap].forEach((map) => {
+        const keys = eventSetupEntries(map);
+        if (!keys) {
+          return;
+        }
+        keys.forEach((k) => keySet.add(k));
+      });
+
+      const keys = [...keySet];
+      if (!keys.length) {
+        return "";
+      }
+
+      const entries = keys.map((k) => {
+        const ibValue = ibMap ? metricNumber(ibMap[k]) : NaN;
+        const prValue = prMap ? metricNumber(prMap[k]) : NaN;
+        const diffValue = diffMap ? metricNumber(diffMap[k]) : NaN;
+        return { key: k, ibValue, prValue, diffValue };
+      });
+
+      const sortState = state.eventSetupSort || { column: "key", direction: "asc" };
+      const direction = sortState.direction === "desc" ? -1 : 1;
+      entries.sort((a, b) => {
+        const col = sortState.column;
+        if (col === "key") {
+          return direction * a.key.localeCompare(b.key);
+        }
+        const av = col === "ib" ? a.ibValue : col === "pr" ? a.prValue : a.diffValue;
+        const bv = col === "ib" ? b.ibValue : col === "pr" ? b.prValue : b.diffValue;
+        const aFinite = Number.isFinite(av);
+        const bFinite = Number.isFinite(bv);
+        if (!aFinite && !bFinite) {
+          return a.key.localeCompare(b.key);
+        }
+        if (!aFinite) {
+          return 1;
+        }
+        if (!bFinite) {
+          return -1;
+        }
+        if (av === bv) {
+          return a.key.localeCompare(b.key);
+        }
+        return direction * (av - bv);
+      });
+
+      function sortArrow(column) {
+        if (sortState.column !== column) {
+          return "";
+        }
+        return sortState.direction === "desc" ? " ▼" : " ▲";
+      }
+
+      const rows = entries.map((entry) => {
+        const ibText = Number.isFinite(entry.ibValue) ? fmtNumber(entry.ibValue, quantity) : "-";
+        const prText = Number.isFinite(entry.prValue) ? fmtNumber(entry.prValue, quantity) : "-";
+        const diffText = Number.isFinite(entry.diffValue) ? fmtNumber(entry.diffValue, quantity) : "-";
+        return `<tr><td>${escapeHtml(entry.key)}</td><td class="mono">${ibText}</td><td class="mono">${prText}</td><td class="mono">${diffText}</td></tr>`;
+      });
+
+      return `
+        <p class="detail-title">Event setup dictionary entries (${escapeHtml(quantity)})</p>
+        <table class="detail-table">
+          <colgroup>
+            <col style="width: 40%;">
+            <col style="width: 20%;">
+            <col style="width: 20%;">
+            <col style="width: 20%;">
+          </colgroup>
+          <thead>
+            <tr>
+              <th class="sortable es-sortable" data-es-sort="key">Key${sortArrow("key")}</th>
+              <th class="sortable es-sortable" data-es-sort="ib">IB${sortArrow("ib")}</th>
+              <th class="sortable es-sortable" data-es-sort="pr">PR${sortArrow("pr")}</th>
+              <th class="sortable es-sortable" data-es-sort="diff">Diff${sortArrow("diff")}</th>
+            </tr>
+          </thead>
+          <tbody>${rows.join("")}</tbody>
+        </table>
+      `;
+    }
+
+    function toggleRowExpanded(key) {
+      if (state.expandedRows.has(key)) {
+        state.expandedRows.delete(key);
+      } else {
+        state.expandedRows.add(key);
+      }
+      renderTable();
+    }
+
+    function extractModules(data) {
+      if (data && Array.isArray(data.modules)) {
+        return data.modules;
+      }
+
+      if (Array.isArray(data)) {
+        return data;
+      }
+
+      return [];
+    }
+
+    function extractQuantityUnits(data) {
+      const quantityUnits = {};
+      if (!data || !Array.isArray(data.resources)) {
+        return quantityUnits;
+      }
+
+      for (const resource of data.resources) {
+        if (!resource || typeof resource.name !== "string") {
+          continue;
+        }
+        const quantity = resource.name.trim().split(/\s+/)[0];
+        if (!quantity || quantityUnits[quantity]) {
+          continue;
+        }
+
+        let unit = typeof resource.unit === "string" ? resource.unit : "";
+        unit = unit.replace(/\s*(IB|PR|diff)\s*$/, "").trim();
+        if (unit) {
+          quantityUnits[quantity] = unit;
+        }
+      }
+
+      return quantityUnits;
+    }
+
+    function quantityLabel(quantity) {
+      const unit = state.quantityUnits[quantity];
+      return unit ? `${quantity} (${unit})` : quantity;
+    }
+
+    function collectFieldGroups(modules) {
+      const map = new Map();
+      for (const mod of modules) {
+        Object.keys(mod).forEach((k) => {
+          const m = k.match(/^(.*) (IB|PR|diff)$/);
+          if (!m) {
+            return;
+          }
+          const base = m[1];
+          const part = m[2];
+          if (!map.has(base)) {
+            map.set(base, { IB: false, PR: false, diff: false, hasNumeric: false });
+          }
+          const flags = map.get(base);
+          flags[part] = true;
+          if (Number.isFinite(metricNumber(mod[k]))) {
+            flags.hasNumeric = true;
+          }
+        });
+      }
+
+      const grouped = {};
+      for (const [base, flags] of map.entries()) {
+        if (flags.IB && flags.PR && flags.diff && flags.hasNumeric) {
+          const idx = base.indexOf(" ");
+          const quantity = idx > 0 ? base.slice(0, idx) : base;
+          const group = idx > 0 ? base.slice(idx + 1) : "(none)";
+          if (!grouped[quantity]) {
+            grouped[quantity] = [];
+          }
+          grouped[quantity].push(group);
+        }
+      }
+
+      const transitionRank = new Map(TRANSITION_ORDER.map((name, index) => [name, index]));
+      Object.keys(grouped).forEach((quantity) => {
+        grouped[quantity].sort((a, b) => {
+          const aRank = transitionRank.has(a) ? transitionRank.get(a) : Number.MAX_SAFE_INTEGER;
+          const bRank = transitionRank.has(b) ? transitionRank.get(b) : Number.MAX_SAFE_INTEGER;
+          if (aRank !== bRank) {
+            return aRank - bRank;
+          }
+          return a.localeCompare(b);
+        });
+      });
+
+      const known = QUANTITY_ORDER.filter((q) => grouped[q]);
+      const extra = Object.keys(grouped).filter((q) => !QUANTITY_ORDER.includes(q)).sort();
+      return {
+        byQuantity: grouped,
+        quantities: [...known, ...extra]
+      };
+    }
+
+    function chooseDefaultQuantity(quantities) {
+      for (const wanted of QUANTITY_ORDER) {
+        if (quantities.includes(wanted)) {
+          return wanted;
+        }
+      }
+      return quantities[0] || "";
+    }
+
+    function chooseDefaultGroup(groups) {
+      const byPreference = ["total", "event", "construction", "begin job"];
+      for (const wanted of byPreference) {
+        if (groups.includes(wanted)) {
+          return wanted;
+        }
+      }
+      return groups[0] || "";
+    }
+
+    function setStatus(message, isError = false) {
+      el.status.textContent = message;
+      el.status.className = isError ? "sub error" : "sub";
+    }
+
+    function populateTypeFilter(modules) {
+      const types = [...new Set(modules.map((m) => m.type || "(none)"))].sort();
+      el.typeFilter.innerHTML = "";
+      const all = document.createElement("option");
+      all.value = "";
+      all.textContent = "All types";
+      el.typeFilter.appendChild(all);
+      for (const t of types) {
+        const opt = document.createElement("option");
+        opt.value = t;
+        opt.textContent = t;
+        el.typeFilter.appendChild(opt);
+      }
+    }
+
+    function populateQuantitySelect(quantities) {
+      el.quantitySelect.innerHTML = "";
+      for (const quantity of quantities) {
+        const opt = document.createElement("option");
+        opt.value = quantity;
+        opt.textContent = quantityLabel(quantity);
+        el.quantitySelect.appendChild(opt);
+      }
+      el.quantitySelect.value = chooseDefaultQuantity(quantities);
+    }
+
+    function populateMetricSelect(groups) {
+      const currentValue = el.metricSelect.value;
+      el.metricSelect.innerHTML = "";
+      for (const key of groups) {
+        const opt = document.createElement("option");
+        opt.value = key;
+        opt.textContent = key;
+        el.metricSelect.appendChild(opt);
+      }
+      if (groups.includes(currentValue)) {
+        el.metricSelect.value = currentValue;
+      } else {
+        el.metricSelect.value = chooseDefaultGroup(groups);
+      }
+    }
+
+    function getSelectedFieldBase() {
+      const quantity = el.quantitySelect.value;
+      const group = el.metricSelect.value;
+      if (!quantity || !group) {
+        return "";
+      }
+      if (group === "(none)") {
+        return quantity;
+      }
+      return `${quantity} ${group}`;
+    }
+
+    function updateColumnHeaders(fieldBase) {
+      const arrow = {
+        "label-desc": " ▼",
+        "label-asc": " ▲",
+        "type-desc": " ▼",
+        "type-asc": " ▲",
+        "record-desc": " ▼",
+        "record-asc": " ▲",
+        "ib-desc": " ▼",
+        "ib-asc": " ▲",
+        "pr-desc": " ▼",
+        "pr-asc": " ▲",
+        "metric-desc": " ▼",
+        "metric-asc": " ▲"
+      };
+      const sortBy = el.sortBy.value;
+      const quantity = fieldBase.split(" ")[0];
+      const unit = state.quantityUnits[quantity] ? ` [${state.quantityUnits[quantity]}]` : "";
+
+      el.colLabel.textContent = `Label${arrow[sortBy] && sortBy.startsWith("label-") ? arrow[sortBy] : ""}`;
+      el.colType.textContent = `Type${arrow[sortBy] && sortBy.startsWith("type-") ? arrow[sortBy] : ""}`;
+      el.colRecord.textContent = `Record${arrow[sortBy] && sortBy.startsWith("record-") ? arrow[sortBy] : ""}`;
+
+      el.colIB.textContent = `${fieldBase} IB${unit}${arrow[sortBy] && sortBy.startsWith("ib-") ? arrow[sortBy] : ""}`;
+      el.colPR.textContent = `${fieldBase} PR${unit}${arrow[sortBy] && sortBy.startsWith("pr-") ? arrow[sortBy] : ""}`;
+      el.colDiff.textContent = `${fieldBase} diff${unit}${arrow[sortBy] && sortBy.startsWith("metric-") ? arrow[sortBy] : ""}`;
+    }
+
+    function updateStats(rows, fieldBase) {
+      const diffKey = `${fieldBase} diff`;
+      const quantity = fieldBase.split(" ")[0];
+      const values = rows.map((r) => toNumber(r[diffKey]));
+      const count = values.length;
+      const mean = count ? values.reduce((a, b) => a + b, 0) / count : 0;
+      const maxAbs = count ? Math.max(...values.map((v) => Math.abs(v))) : 0;
+      const types = new Set(rows.map((r) => r.type || "(none)")).size;
+
+      state.maxAbsMetric = Math.max(maxAbs, 1e-9);
+
+      el.statModules.textContent = count.toLocaleString();
+      el.statTypes.textContent = types.toLocaleString();
+      el.statMean.textContent = fmtNumber(mean, quantity);
+      el.statMaxAbs.textContent = fmtNumber(maxAbs, quantity);
+    }
+
+    function applyFilters() {
+      const q = el.search.value.trim().toLowerCase();
+      const type = el.typeFilter.value;
+      const fieldBase = getSelectedFieldBase();
+      if (!fieldBase) {
+        state.filtered = [];
+        updateColumnHeaders("(field)");
+        updateStats([], "");
+        renderTable();
+        return;
+      }
+      const diffKey = `${fieldBase} diff`;
+      const ibKey = `${fieldBase} IB`;
+      const prKey = `${fieldBase} PR`;
+      const minAbs = Math.abs(toNumber(el.minAbs.value));
+
+      updateColumnHeaders(fieldBase || "(field)");
+
+      const rows = state.modules.filter((m) => {
+        if (type && (m.type || "(none)") !== type) {
+          return false;
+        }
+
+        if (q) {
+          const hay = `${m.label || ""} ${m.type || ""} ${m.record || ""}`.toLowerCase();
+          if (!hay.includes(q)) {
+            return false;
+          }
+        }
+
+        if (Math.abs(toNumber(m[diffKey])) < minAbs) {
+          return false;
+        }
+
+        if ((el.sortBy.value === "record-asc" || el.sortBy.value === "record-desc") &&
+            (!m.record || String(m.record).trim() === "")) {
+          return false;
+        }
+
+        return true;
+      });
+
+      rows.sort((a, b) => {
+        switch (el.sortBy.value) {
+          case "label-asc":
+            return String(a.label || "").localeCompare(String(b.label || ""));
+          case "label-desc":
+            return String(b.label || "").localeCompare(String(a.label || ""));
+          case "type-asc":
+            return String(a.type || "").localeCompare(String(b.type || ""));
+          case "type-desc":
+            return String(b.type || "").localeCompare(String(a.type || ""));
+          case "record-asc":
+            return String(a.record || "").localeCompare(String(b.record || ""));
+          case "record-desc":
+            return String(b.record || "").localeCompare(String(a.record || ""));
+          case "ib-asc":
+            return toNumber(a[ibKey]) - toNumber(b[ibKey]);
+          case "ib-desc":
+            return toNumber(b[ibKey]) - toNumber(a[ibKey]);
+          case "pr-asc":
+            return toNumber(a[prKey]) - toNumber(b[prKey]);
+          case "pr-desc":
+            return toNumber(b[prKey]) - toNumber(a[prKey]);
+          case "metric-asc":
+            return toNumber(a[diffKey]) - toNumber(b[diffKey]);
+          case "metric-desc":
+            return toNumber(b[diffKey]) - toNumber(a[diffKey]);
+          case "abs-desc":
+          default: {
+            const byFixedMetric = Math.abs(toNumber(b[diffKey])) - Math.abs(toNumber(a[diffKey]));
+            if (byFixedMetric !== 0) {
+              return byFixedMetric;
+            }
+            return String(a.label || "").localeCompare(String(b.label || ""));
+          }
+        }
+      });
+
+      state.filtered = rows;
+      const pageCount = Math.max(1, Math.ceil(rows.length / Math.max(20, toNumber(el.rowsPerPage.value) || 120)));
+      state.page = Math.min(state.page, pageCount);
+
+      updateStats(rows, fieldBase);
+      renderTable();
+    }
+
+    function barStyle(value) {
+      const abs = Math.abs(value);
+      const pct = Math.min(100, (abs / state.maxAbsMetric) * 100);
+      const side = value >= 0 ? "up" : "down";
+      const left = value >= 0 ? "50%" : `${50 - pct / 2}%`;
+      return { pct, side, left };
+    }
+
+    function renderTable() {
+      const fieldBase = getSelectedFieldBase();
+      if (!fieldBase) {
+        el.tbody.innerHTML = "";
+        el.empty.style.display = "block";
+        el.pageInfo.textContent = "Page 0/0";
+        el.prevBtn.disabled = true;
+        el.nextBtn.disabled = true;
+        return;
+      }
+      const ibKey = `${fieldBase} IB`;
+      const prKey = `${fieldBase} PR`;
+      const diffKey = `${fieldBase} diff`;
+      const rowsPerPage = Math.max(20, toNumber(el.rowsPerPage.value) || 120);
+      const pageCount = Math.max(1, Math.ceil(state.filtered.length / rowsPerPage));
+      state.page = Math.min(Math.max(1, state.page), pageCount);
+
+      const start = (state.page - 1) * rowsPerPage;
+      const pageRows = state.filtered.slice(start, start + rowsPerPage);
+
+      el.tbody.innerHTML = "";
+      el.empty.style.display = pageRows.length ? "none" : "block";
+
+      const quantity = fieldBase.split(" ")[0];
+
+      for (const row of pageRows) {
+        const tr = document.createElement("tr");
+        const ibValue = toNumber(row[ibKey]);
+        const prValue = toNumber(row[prKey]);
+        const diffValue = toNumber(row[diffKey]);
+        const visual = barStyle(diffValue);
+        const key = rowKey(row);
+        const isExpanded = state.expandedRows.has(key);
+
+        tr.className = isExpanded ? "expandable expanded" : "expandable";
+        tr.setAttribute("aria-expanded", String(isExpanded));
+
+        tr.innerHTML = `
+          <td title="${(row.label || "").replaceAll('"', "&quot;")}"><span class="expand-icon">${isExpanded ? "▼" : "▶"}</span>${row.label || ""}</td>
+          <td><span class="pill">${row.type || "(none)"}</span></td>
+          <td class="mono">${row.record || "-"}</td>
+          <td class="mono">${fmtNumber(ibValue, quantity)}</td>
+          <td class="mono">${fmtNumber(prValue, quantity)}</td>
+          <td class="mono">${fmtNumber(diffValue, quantity)}</td>
+          <td class="bar-cell">
+            <div class="bar-track">
+              <div class="bar-fill ${visual.side}" style="left:${visual.left}; width:${visual.pct}%;"></div>
+            </div>
+          </td>
+        `;
+        tr.addEventListener("click", () => toggleRowExpanded(key));
+        el.tbody.appendChild(tr);
+
+        if (isExpanded) {
+          const eventSetupDetail = buildEventSetupDetailTable(row, el.quantitySelect.value);
+          const detailTr = document.createElement("tr");
+          detailTr.className = "detail-row";
+          detailTr.innerHTML = `
+            <td colspan="5">
+              <div class="detail-wrap">
+                <p class="detail-title">Transitions for quantity: ${escapeHtml(el.quantitySelect.value)}</p>
+                <table class="detail-table">
+                  <colgroup>
+                    <col style="width: 20%;">
+                    <col style="width: 20%;">
+                    <col style="width: 20%;">
+                    <col style="width: 20%;">
+                    <col style="width: 20%;">
+                  </colgroup>
+                  <thead>
+                    <tr>
+                      <th>Quantity</th>
+                      <th>Transition</th>
+                      <th>IB</th>
+                      <th>PR</th>
+                      <th>Diff</th>
+                    </tr>
+                  </thead>
+                  <tbody>${buildExpandedMetricsRows(row, el.quantitySelect.value)}</tbody>
+                </table>
+                ${eventSetupDetail}
+              </div>
+            </td>
+          `;
+          el.tbody.appendChild(detailTr);
+        }
+      }
+
+      const from = state.filtered.length ? start + 1 : 0;
+      const to = Math.min(start + pageRows.length, state.filtered.length);
+      el.pageInfo.textContent = `Page ${state.page}/${pageCount} | Rows ${from}-${to} of ${state.filtered.length}`;
+      el.prevBtn.disabled = state.page <= 1;
+      el.nextBtn.disabled = state.page >= pageCount;
+    }
+
+    function loadFromObject(data, sourceLabel) {
+      const modules = extractModules(data);
+      if (!modules.length || typeof modules[0] !== "object") {
+        throw new Error("No module records found. Expected an object with a modules array.");
+      }
+
+      state.modules = modules;
+      state.quantityUnits = extractQuantityUnits(data);
+      const groupedFields = collectFieldGroups(modules);
+      state.fieldGroupsByQuantity = groupedFields.byQuantity;
+      state.quantities = groupedFields.quantities;
+      state.page = 1;
+
+      if (!state.quantities.length) {
+        throw new Error("No IB/PR/diff transitions found in module records.");
+      }
+
+      populateTypeFilter(modules);
+      populateQuantitySelect(state.quantities);
+      const selectedQuantity = el.quantitySelect.value;
+      populateMetricSelect(state.fieldGroupsByQuantity[selectedQuantity] || []);
+      applyFilters();
+
+      setStatus(`Loaded ${modules.length.toLocaleString()} modules from ${sourceLabel}.`);
+    }
+
+    async function loadFromText(text, sourceLabel) {
+      let data;
+      try {
+        data = JSON.parse(text);
+      } catch (err) {
+        throw new Error(`Invalid JSON in ${sourceLabel}: ${err.message}`);
+      }
+      loadFromObject(data, sourceLabel);
+    }
+
+    async function tryAutoLoad(fileName) {
+      const name = fileName.trim();
+      if (!name) {
+        setStatus("Please enter a file name to auto-load.", true);
+        return;
+      }
+
+      try {
+        const res = await fetch(name, { cache: "no-store" });
+        if (!res.ok) {
+          throw new Error(`HTTP ${res.status}`);
+        }
+        const text = await res.text();
+        await loadFromText(text, name);
+      } catch (err) {
+        setStatus(
+          `Auto-load failed (${err.message}). If this page is opened with file://, browser fetch may be blocked. Use file picker or drag-and-drop.`,
+          true
+        );
+      }
+    }
+
+    function getFileParamFromUrl() {
+      const params = new URLSearchParams(window.location.search);
+      return params.get("file") || params.get("url") || params.get("json") || "";
+    }
+
+    function wireEvents() {
+      function toggleSort(descValue, ascValue) {
+        el.sortBy.value = el.sortBy.value === descValue ? ascValue : descValue;
+        state.page = 1;
+        applyFilters();
+      }
+
+      function toggleEventSetupSort(column) {
+        if (!column) {
+          return;
+        }
+        if (state.eventSetupSort.column === column) {
+          state.eventSetupSort.direction = state.eventSetupSort.direction === "desc" ? "asc" : "desc";
+        } else {
+          state.eventSetupSort.column = column;
+          state.eventSetupSort.direction = column === "key" ? "asc" : "desc";
+        }
+        renderTable();
+      }
+
+      el.fileInput.addEventListener("change", async (evt) => {
+        const file = evt.target.files && evt.target.files[0];
+        if (!file) {
+          return;
+        }
+        const text = await file.text();
+        try {
+          await loadFromText(text, file.name);
+        } catch (err) {
+          setStatus(err.message, true);
+        }
+      });
+
+      el.autoLoadBtn.addEventListener("click", () => {
+        tryAutoLoad(el.defaultFile.value);
+      });
+
+      el.quantitySelect.addEventListener("change", () => {
+        const groups = state.fieldGroupsByQuantity[el.quantitySelect.value] || [];
+        populateMetricSelect(groups);
+        state.page = 1;
+        applyFilters();
+      });
+
+      [el.search, el.typeFilter, el.metricSelect, el.sortBy, el.minAbs, el.rowsPerPage].forEach((node) => {
+        const eventName = node.tagName === "INPUT" ? "input" : "change";
+        node.addEventListener(eventName, () => {
+          state.page = 1;
+          applyFilters();
+        });
+      });
+
+      el.colIB.addEventListener("click", () => toggleSort("ib-desc", "ib-asc"));
+      el.colPR.addEventListener("click", () => toggleSort("pr-desc", "pr-asc"));
+      el.colDiff.addEventListener("click", () => toggleSort("metric-desc", "metric-asc"));
+      el.colLabel.addEventListener("click", () => toggleSort("label-desc", "label-asc"));
+      el.colType.addEventListener("click", () => toggleSort("type-desc", "type-asc"));
+      el.colRecord.addEventListener("click", () => toggleSort("record-desc", "record-asc"));
+
+      el.tbody.addEventListener("click", (evt) => {
+        const header = evt.target.closest("th.es-sortable");
+        if (!header) {
+          return;
+        }
+        toggleEventSetupSort(header.dataset.esSort || "");
+      });
+
+      el.prevBtn.addEventListener("click", () => {
+        state.page = Math.max(1, state.page - 1);
+        renderTable();
+      });
+
+      el.nextBtn.addEventListener("click", () => {
+        state.page += 1;
+        renderTable();
+      });
+
+      ["dragenter", "dragover"].forEach((evtName) => {
+        el.dropzone.addEventListener(evtName, (evt) => {
+          evt.preventDefault();
+          el.dropzone.classList.add("drag");
+        });
+      });
+
+      ["dragleave", "drop"].forEach((evtName) => {
+        el.dropzone.addEventListener(evtName, (evt) => {
+          evt.preventDefault();
+          el.dropzone.classList.remove("drag");
+        });
+      });
+
+      el.dropzone.addEventListener("drop", async (evt) => {
+        const file = evt.dataTransfer && evt.dataTransfer.files && evt.dataTransfer.files[0];
+        if (!file) {
+          return;
+        }
+        try {
+          const text = await file.text();
+          await loadFromText(text, file.name);
+        } catch (err) {
+          setStatus(err.message, true);
+        }
+      });
+    }
+
+    function boot() {
+      wireEvents();
+      el.typeFilter.innerHTML = '<option value="">All types</option>';
+      el.sortBy.disabled = false;
+      el.sortBy.value = "abs-desc";
+      el.sortBy.title = "Default sort: abs(added total diff) high to low.";
+      el.quantitySelect.innerHTML = "";
+      el.metricSelect.innerHTML = "";
+      renderTable();
+
+      const fileFromUrl = getFileParamFromUrl().trim();
+      if (fileFromUrl) {
+        el.defaultFile.value = fileFromUrl;
+        setStatus(`Trying URL parameter file: ${fileFromUrl}`);
+        tryAutoLoad(fileFromUrl);
+      }
+    }
+
+    boot();
+  </script>
+</body>
+</html>