lumitrace 0.4.2 → 0.6.0

data/runv/index.html

@@ -4,9 +4,9 @@
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>LumiTrace Playground</title>
-  <meta name="description" content="Run Ruby in the browser and see traced values inline with lumitrace 0.4.1.">
+  <meta name="description" content="Run Ruby in the browser and see traced values inline with lumitrace 0.6.0.">
   <meta property="og:title" content="LumiTrace Playground">
-  <meta property="og:description" content="Run Ruby in the browser and see traced values inline with lumitrace 0.4.1.">
+  <meta property="og:description" content="Run Ruby in the browser and see traced values inline with lumitrace 0.6.0.">
   <meta property="og:type" content="website">
   <meta property="og:url" content="https://github.com/ko1/lumitrace/tree/master/runv">
   <meta property="og:see_also" content="https://github.com/ko1/lumitrace/tree/master/runv">
@@ -290,7 +290,7 @@
   <header>
     <div>
       <h1>LumiTrace Playground</h1>
-      <p class="sub">Run Ruby in the browser and see traced values inline with lumitrace 0.4.1.</p>
+      <p class="sub">Run Ruby in the browser and see traced values inline with lumitrace 0.6.0.</p>
     </div>
   </header>
 
@@ -448,6 +448,8 @@ module Lumitrace
   end
 
 module RecordInstrument
+  IDENTIFIER_METHOD_NAME_RE = /\A[a-z_]\w*[!?=]?\z/.freeze
+
   SKIP_NODE_CLASSES = [
     Prism::DefNode,
     Prism::ClassNode,
@@ -488,7 +490,7 @@ module RecordInstrument
     Prism::GlobalVariableReadNode
   ].freeze
 
-  def self.instrument_source(src, ranges, file_label: nil, record_method: "Lumitrace::R")
+  def self.instrument_source(src, ranges, file_label: nil, record_method: "::Lumitrace::R")
     file_label ||= "(unknown)"
     ranges = normalize_ranges(ranges)
 
@@ -540,7 +542,7 @@ module RecordInstrument
         end
       end
 
-      node.child_nodes.each { |child| stack << [child, node] }
+      instrumentable_child_nodes(node).each { |child| stack << [child, node] }
     end
     locs
   end
@@ -577,7 +579,7 @@ module RecordInstrument
         end
       end
 
-      node.child_nodes.each { |child| stack << [child, node] }
+      instrumentable_child_nodes(node).each { |child| stack << [child, node] }
     end
 
     inserts
@@ -618,6 +620,8 @@ module RecordInstrument
   def self.wrap_expr?(node, parent = nil)
     return false unless node.respond_to?(:location)
     return false if literal_value_node?(node)
+    return false if command_style_call_node?(node)
+    return false if parent.is_a?(Prism::DefinedNode)
     if parent.is_a?(Prism::AliasGlobalVariableNode) || parent.is_a?(Prism::AliasMethodNode)
       return false
     end
@@ -637,6 +641,27 @@ module RecordInstrument
     WRAP_NODE_CLASSES.include?(node.class)
   end
 
+  def self.command_style_call_node?(node)
+    return false unless node.is_a?(Prism::CallNode)
+    return false unless node.respond_to?(:arguments) && node.arguments
+    return false if node.respond_to?(:opening_loc) && node.opening_loc
+
+    name = node.respond_to?(:name) ? node.name : nil
+    return false unless name
+
+    IDENTIFIER_METHOD_NAME_RE.match?(name.to_s)
+  end
+
+  def self.instrumentable_child_nodes(node)
+    return [] unless node
+    return [] if node.is_a?(Prism::DefinedNode)
+    if command_style_call_node?(node) && node.respond_to?(:block) && node.block
+      [node.block]
+    else
+      node.child_nodes
+    end
+  end
+
   def self.expr_location(node)
     loc = node.location
     return {
@@ -782,22 +807,31 @@ module RecordInstrument
 
   def self.events_from_ids
     out = []
-    @events_by_id.each_with_index do |e, id|
-      next unless e
-      loc = @loc_by_id[id]
+    summary_cache = {}
+    @loc_by_id.each_with_index do |loc, id|
       next unless loc
+
+      e = @events_by_id[id]
       case collect_mode
       when :history
-        raw_values = values_from_ring(e)
-        all_types = history_type_set(e)
-        if all_types.nil? || all_types.empty?
-          all_types = {}
-          raw_values.each do |v|
-            t = value_type_name(v)
-            all_types[t] = (all_types[t] || 0) + 1
+        if e
+          raw_values = values_from_ring(e)
+          all_types = history_type_set(e)
+          if all_types.nil? || all_types.empty?
+            all_types = {}
+            raw_values.each do |v|
+              t = value_type_name(v)
+              all_types[t] = (all_types[t] || 0) + 1
+            end
           end
+          max = history_ring_size(e)
+          total = e[max + 1]
+        else
+          raw_values = []
+          all_types = {}
+          total = 0
         end
-        max = history_ring_size(e)
+
         out << {
           file: loc[:file],
           start_line: loc[:start_line],
@@ -806,9 +840,20 @@ module RecordInstrument
           end_col: loc[:end_col],
           kind: loc[:kind].to_s,
           name: loc[:name],
-          sampled_values: raw_values.map { |v| summarize_value(v, type: value_type_name(v)) },
+          sampled_values: raw_values.map do |v|
+            key = v.__id__
+            cached = summary_cache[key]
+            if cached
+              cached.dup
+            else
+              type = value_type_name(v)
+              summary = summarize_value(v, type: type)
+              summary_cache[key] = summary
+              summary.dup
+            end
+          end,
           types: sorted_type_counts(all_types),
-          total: e[max + 1]
+          total: total
         }
       when :types
         out << {
@@ -819,12 +864,12 @@ module RecordInstrument
           end_col: loc[:end_col],
           kind: loc[:kind].to_s,
           name: loc[:name],
-          types: sorted_type_counts(e[:types]),
-          total: e[:total]
+          types: sorted_type_counts(e ? e[:types] : nil),
+          total: e ? e[:total] : 0
         }
       else # :last
-        last_raw = e[:last_value]
-        last_type = value_type_name(last_raw)
+        last_raw = e && e[:last_value]
+        last_type = value_type_name(last_raw) if e
         out << {
           file: loc[:file],
           start_line: loc[:start_line],
@@ -833,9 +878,21 @@ module RecordInstrument
           end_col: loc[:end_col],
           kind: loc[:kind].to_s,
           name: loc[:name],
-          last_value: summarize_value(last_raw, type: last_type),
-          types: sorted_type_counts(e[:types]),
-          total: e[:total]
+          last_value: if e
+            key = last_raw.__id__
+            cached = summary_cache[key]
+            if cached
+              cached.dup
+            else
+              summary = summarize_value(last_raw, type: last_type)
+              summary_cache[key] = summary
+              summary.dup
+            end
+          else
+            nil
+          end,
+          types: sorted_type_counts(e ? e[:types] : nil),
+          total: e ? e[:total] : 0
         }
       end
     end
@@ -879,10 +936,42 @@ module RecordInstrument
 
   def self.dump_events_json(events, path = nil)
     path ||= File.expand_path("lumitrace_recorded.json", Dir.pwd)
-    File.write(path, JSON.dump(events), perm: 0o600)
+    payload = {
+      version: 1,
+      events: events,
+      coverage: compute_coverage(events)
+    }
+    File.write(path, JSON.dump(payload), perm: 0o600)
     path
   end
 
+  def self.compute_coverage(events)
+    by_file = {}
+    events.each do |e|
+      file = e[:file] || e["file"]
+      next unless file
+      total = e[:total] || e["total"] || 0
+      start_line = e[:start_line] || e["start_line"]
+      next unless start_line
+
+      entry = (by_file[file] ||= { lines: {}, covered_lines: {} })
+      entry[:lines][start_line] = true
+      entry[:covered_lines][start_line] = true if total > 0
+    end
+
+    by_file.map do |file, entry|
+      total_lines = entry[:lines].size
+      covered_lines = entry[:covered_lines].size
+      pct = total_lines > 0 ? (covered_lines * 100.0 / total_lines).round(1) : 0.0
+      {
+        file: file,
+        total_lines: total_lines,
+        covered_lines: covered_lines,
+        coverage_percent: pct
+      }
+    end.sort_by { |e| e[:file] }
+  end
+
   def self.load_events_json(path)
     JSON.parse(File.read(path))
   end
@@ -1070,25 +1159,36 @@ module RecordInstrument
     events_from_ids
   end
 
+  KERNEL_INSPECT = ::Kernel.instance_method(:inspect)
+
+  def self.safe_inspect(v)
+    v.inspect
+  rescue ::NoMethodError
+    KERNEL_INSPECT.bind_call(v)
+  end
+
   def self.safe_value(v)
     case v
     when Numeric, TrueClass, FalseClass, NilClass
       v
     else
-      s = v.inspect
+      s = safe_inspect(v)
       s.bytesize > 1000 ? s[0, 1000] + "..." : s
     end
   end
 
+  KERNEL_CLASS = ::Kernel.instance_method(:class)
+
   def self.value_type_name(v)
-    name = v.class.name
-    name && !name.empty? ? name : v.class.to_s
+    klass = KERNEL_CLASS.bind_call(v)
+    name = klass.name
+    name && !name.empty? ? name : klass.to_s
   end
 
   def self.summarize_value(v, type: nil)
     type ||= value_type_name(v)
     preview_limit = 120
-    inspected = v.inspect
+    inspected = safe_inspect(v)
     if inspected.length > preview_limit
       {
         type: type,
@@ -1292,6 +1392,20 @@ require "json"
 
 module Lumitrace
 module GenerateResultedHtml
+  RENDERER_JS_PATH = File.expand_path("generate_resulted_html_renderer.js", __dir__)
+
+  def self.monotonic_now
+    Process.clock_gettime(Process::CLOCK_MONOTONIC)
+  end
+
+  def self.time_step(label, logger = nil)
+    start = monotonic_now
+    result = yield
+    elapsed_ms = (monotonic_now - start) * 1000.0
+    logger&.call(format("html render: %s %.1fms", label, elapsed_ms))
+    result
+  end
+
   def self.render(source_path, events_path, ranges: nil, collect_mode: nil, max_samples: nil)
     unless File.exist?(events_path)
       abort "missing #{events_path}"
@@ -1300,51 +1414,972 @@ module GenerateResultedHtml
       abort "missing #{source_path}"
     end
 
-    raw_events = JSON.parse(File.read(events_path))
+    raw = JSON.parse(File.read(events_path))
+    raw_events = raw.is_a?(Hash) && raw.key?("events") ? raw["events"] : raw
+    src = File.read(source_path)
     mode_info = resolve_mode_info(raw_events, collect_mode: collect_mode, max_samples: max_samples)
-    events = normalize_events(raw_events)
-    events = add_missing_events(events, File.read(source_path), source_path, ranges)
+    normalized_ranges = normalize_ranges(ranges)
+    events = normalize_events(raw_events).select { |e| e[:file] == source_path }
+
+    payload = build_html_payload(
+      mode_info: mode_info,
+      files: [
+        build_html_payload_file(
+          path: source_path,
+          display_path: File.basename(source_path),
+          source: src,
+          ranges: normalized_ranges,
+          trace_events: events
+        )
+      ]
+    )
 
-    src = File.read(source_path)
-    src_lines = src.lines
-    ranges = normalize_ranges(ranges)
-    expected_by_line, executed_by_line = line_stats(src, ranges, events, source_path)
+    render_payload_html(payload)
+  end
 
-    html_lines = []
-    prev_lineno = nil
-    first_lineno = nil
-    last_lineno = nil
-    src_lines.each_with_index do |line, idx|
-      lineno = idx + 1
-      next if ranges && !line_in_ranges?(lineno, ranges)
-      first_lineno ||= lineno
-      if prev_lineno && lineno > prev_lineno + 1
-        html_lines << "<span class=\"line ellipsis\" data-line=\"...\"><span class=\"ln\">...</span></span>\n"
-      end
-      line_text = line.chomp
-      evs = aggregate_events_for_line(events, lineno, line_text.length)
-      expected = expected_by_line[lineno]
-      executed = executed_by_line[lineno]
-      line_class = line_class_for(expected, executed)
-      if expected > 0 && executed == 0
-        evs.each { |e| e[:suppress_miss] = true }
-      end
-      if evs.empty?
-        html_lines << "<span class=\"line#{line_class}\" data-line=\"#{lineno}\"><span class=\"ln\">#{lineno}</span> #{esc(line_text)}</span>\n"
-      else
-        rendered = render_line_with_events(line_text, evs)
-        html_lines << "<span class=\"line#{line_class}\" data-line=\"#{lineno}\"><span class=\"ln\">#{lineno}</span> #{rendered}</span>\n"
-      end
-      prev_lineno = lineno
-      last_lineno = lineno
+  def self.esc(s)
+    s.to_s
+      .gsub("&", "&amp;")
+      .gsub("<", "&lt;")
+      .gsub(">", "&gt;")
+      .gsub('"', "&quot;")
+  end
+
+  def self.build_html_payload(mode_info:, files:, command_text: nil)
+    meta = {
+      mode: mode_info[:mode],
+      mode_text: mode_info[:text],
+      max_samples: mode_info[:max_samples]
+    }
+    meta[:command] = command_text if command_text && !command_text.to_s.empty?
+    {
+      version: 1,
+      meta: meta,
+      files: files
+    }
+  end
+
+  def self.build_html_payload_file(path:, display_path:, source:, ranges:, trace_events:, logger: nil)
+    sort_start = logger ? monotonic_now : nil
+    sorted_events = Array(trace_events).sort_by do |e|
+      [e[:start_line].to_i, e[:start_col].to_i, e[:end_line].to_i, e[:end_col].to_i]
     end
-    if first_lineno && first_lineno > 1
-      html_lines.unshift("<span class=\"line ellipsis\" data-line=\"...\"><span class=\"ln\">...</span></span>\n")
+    sort_ms = sort_start ? (monotonic_now - sort_start) * 1000.0 : nil
+
+    map_start = logger ? monotonic_now : nil
+    trace_payload = sorted_events.map { |e| event_to_html_trace_payload(e) }
+    map_ms = map_start ? (monotonic_now - map_start) * 1000.0 : nil
+    if logger
+      logger.call(format("html render: payload_file %s sort=%.1fms map=%.1fms events=%d", display_path, sort_ms, map_ms, sorted_events.length))
     end
-    if last_lineno && last_lineno < src_lines.length
-      html_lines << "<span class=\"line ellipsis\" data-line=\"...\"><span class=\"ln\">...</span></span>\n"
+
+    {
+      path: path,
+      display_path: display_path,
+      source: source,
+      ranges: ranges,
+      trace: trace_payload
+    }
+  end
+
+  def self.event_to_html_trace_payload(e)
+    sampled_values = e[:sampled_values]
+    if (sampled_values.nil? || sampled_values.empty?) && e[:last_value]
+      sampled_values = [e[:last_value]]
     end
+    {
+      location: [
+        e[:start_line].to_i,
+        e[:start_col].to_i,
+        e[:end_line].to_i,
+        e[:end_col].to_i
+      ],
+      kind: (e[:kind] || "expr").to_s,
+      name: e[:name],
+      sampled_values: sampled_values || [],
+      types: sorted_type_counts(e[:types]),
+      total: e[:total].to_i
+    }
+  end
+
+  def self.payload_json_for_script(payload)
+    JSON.generate(payload)
+      .gsub("</", "<\\/")
+      .gsub("\u2028", "\\u2028")
+      .gsub("\u2029", "\\u2029")
+  end
+
+  def self.html_renderer_js
+  @html_renderer_js ||= '(function() {
+  const payloadEl = document.getElementById("lumitrace-payload");
+  const app = document.getElementById("lumitrace-app");
+  if (!payloadEl || !app) return;
+
+  const SL = 0;
+  const SC = 1;
+  const EL = 2;
+  const EC = 3;
+
+  function escHtml(s) {
+    return String(s)
+      .replace(/&/g, "&amp;")
+      .replace(/</g, "&lt;")
+      .replace(/>/g, "&gt;")
+      .replace(/\\"/g, "&quot;");
+  }
+
+  function normalizeTypeCounts(types) {
+    if (!types) return {};
+    if (Array.isArray(types)) {
+      const out = {};
+      for (const t of types) {
+        const key = String(t || "");
+        if (!key) continue;
+        out[key] = (out[key] || 0) + 1;
+      }
+      return out;
+    }
+    if (typeof types === "object") {
+      const out = {};
+      for (const [k, v] of Object.entries(types)) {
+        const key = String(k || "");
+        if (!key) continue;
+        let count = Number(v) || 0;
+        if (count <= 0) count = 1;
+        out[key] = (out[key] || 0) + count;
+      }
+      return out;
+    }
+    const key = String(types || "");
+    return key ? { [key]: 1 } : {};
+  }
+
+  function typeListText(types, onlyIfMultiple) {
+    const counts = normalizeTypeCounts(types);
+    const entries = Object.entries(counts).sort(([a], [b]) => a.localeCompare(b));
+    if (onlyIfMultiple && entries.length <= 1) return null;
+    if (entries.length === 0) return "(no types)";
+    return "types: " + entries.map(([k, v]) => `${k}(${v})`).join(", ");
+  }
+
+  function valueTypeName(v) {
+    if (v === null) return "NilClass";
+    if (Array.isArray(v)) return "Array";
+    switch (typeof v) {
+      case "number": return Number.isInteger(v) ? "Integer" : "Float";
+      case "string": return "String";
+      case "boolean": return "Boolean";
+      case "undefined": return "NilClass";
+      case "object": return "Object";
+      default: return typeof v;
+    }
+  }
+
+  function formatValue(v, type) {
+    const value = v == null ? "nil" : String(v);
+    return `${value} (${type || valueTypeName(v)})`;
+  }
+
+  function lastValueToPair(lastValue) {
+    if (lastValue == null) return [null, null];
+    if (typeof lastValue !== "object" || Array.isArray(lastValue)) return [lastValue, null];
+    const type = lastValue.type || null;
+    if (Object.prototype.hasOwnProperty.call(lastValue, "value")) return [lastValue.value, type];
+    if (Object.prototype.hasOwnProperty.call(lastValue, "preview")) return [lastValue.preview, type];
+    if (Object.prototype.hasOwnProperty.call(lastValue, "inspect")) return [lastValue.inspect, type];
+    return [JSON.stringify(lastValue), type];
+  }
+
+  function summarizeValues(values, total, allTypes) {
+    if (!values || values.length === 0) {
+      const multi = typeListText(allTypes, false);
+      return multi || "";
+    }
+
+    const n = total == null ? values.length : Number(total);
+    const lastVals = values.slice(-3);
+    const firstIndex = n - lastVals.length + 1;
+    const lines = [];
+    const extra = n - lastVals.length;
+    if (extra > 0) lines.push(`... (+${extra} more)`);
+
+    lastVals.forEach((v, i) => {
+      const idx = firstIndex + i;
+      const [valueText, typeText] = lastValueToPair(v);
+      lines.push(`#${idx}: ${formatValue(valueText, typeText)}`);
+    });
+
+    const multi = typeListText(allTypes, true);
+    if (multi) lines.push(multi);
+    return lines.join("\\n");
+  }
+
+  function lineClassFor(expected, executed) {
+    if (executed > 0) return " hit";
+    if (expected > 0) return " miss";
+    return "";
+  }
+
+  function lineInRanges(line, ranges) {
+    if (!ranges || ranges.length === 0) return true;
+    return ranges.some((range) => {
+      if (!Array.isArray(range) || range.length < 2) return false;
+      const start = Number(range[0]);
+      const end = Number(range[1]);
+      return line >= start && line <= end;
+    });
+  }
+
+  function sourceLines(source) {
+    const matches = String(source || "").match(/[^\\n]*\\n|[^\\n]+/g);
+    if (!matches) return [];
+    return matches.map((line) => line.endsWith("\\n") ? line.slice(0, -1) : line);
+  }
+
+  function lineStatsForFile(trace) {
+    const expectedByLine = Object.create(null);
+    const executedByLine = Object.create(null);
+    const seen = Object.create(null);
+
+    for (const event of trace || []) {
+      const loc = event && event.location;
+      if (!Array.isArray(loc) || loc.length < 4) continue;
+      const sl = Number(loc[SL]);
+      const el = Number(loc[EL]);
+      if (!(sl > 0) || !(el > 0)) continue;
+      const key = `${sl}:${loc[SC]}:${el}:${loc[EC]}`;
+      if (seen[key]) continue;
+      seen[key] = true;
+      for (let line = sl; line <= el; line += 1) {
+        expectedByLine[line] = (expectedByLine[line] || 0) + 1;
+        if (Number(event.total) > 0) {
+          executedByLine[line] = (executedByLine[line] || 0) + 1;
+        }
+      }
+    }
+
+    return { expectedByLine, executedByLine };
+  }
+
+  function expressionLineCoverageForTrace(trace) {
+    const expectedLines = new Set();
+    const executedLines = new Set();
+    const seen = new Set();
+
+    for (const event of trace || []) {
+      if (!event || event.kind === "arg") continue;
+      const loc = event.location;
+      if (!Array.isArray(loc) || loc.length < 4) continue;
+
+      const sl = Number(loc[SL]);
+      const sc = Number(loc[SC]);
+      const el = Number(loc[EL]);
+      const ec = Number(loc[EC]);
+      if (!(sl > 0) || !(el > 0)) continue;
+
+      const key = `${sl}:${sc}:${el}:${ec}`;
+      if (seen.has(key)) continue;
+      seen.add(key);
+
+      for (let line = sl; line <= el; line += 1) {
+        expectedLines.add(line);
+        if (Number(event.total) > 0) executedLines.add(line);
+      }
+    }
+
+    return {
+      executed: executedLines.size,
+      expected: expectedLines.size
+    };
+  }
+
+  function aggregateEventsForLine(trace, lineno, lineLen, fileIndex) {
+    const buckets = new Map();
+    const spans = [];
+
+    for (const event of trace || []) {
+      const loc = event && event.location;
+      if (!Array.isArray(loc) || loc.length < 4) continue;
+      const sline = Number(loc[SL]);
+      const scol = Number(loc[SC]);
+      const eline = Number(loc[EL]);
+      const ecol = Number(loc[EC]);
+      if (lineno < sline || lineno > eline) continue;
+
+      let s;
+      let t;
+      let marker;
+      if (sline === eline) {
+        s = scol;
+        t = ecol;
+        marker = true;
+      } else if (lineno === sline) {
+        s = scol;
+        t = lineLen;
+        marker = false;
+      } else if (lineno === eline) {
+        s = 0;
+        t = ecol;
+        marker = true;
+      } else {
+        s = 0;
+        t = lineLen;
+        marker = false;
+      }
+
+      if (!(t > s)) continue;
+      spans.push({ start_col: s, end_col: t });
+
+      const keyId = `${fileIndex}:${sline}:${scol}:${eline}:${ecol}`;
+      buckets.set(keyId, {
+        key_id: keyId,
+        start_col: s,
+        end_col: t,
+        marker,
+        kind: event.kind || "expr",
+        name: event.name || null,
+        sampled_values: event.sampled_values || [],
+        types: event.types || {},
+        total: Number(event.total) || 0,
+        suppress_miss: false
+      });
+    }
+
+    const out = Array.from(buckets.values());
+    for (const b of out) {
+      const depth = spans.filter((sp) => b.start_col >= sp.start_col && b.end_col <= sp.end_col).length;
+      b.depth = Math.min(5, Math.max(1, depth));
+    }
+    out.sort((a, b) => a.start_col - b.start_col);
+    return out;
+  }
+
+  function renderLineHtml(lineText, events) {
+    const opens = Object.create(null);
+    const closes = Object.create(null);
+
+    for (const e of events) {
+      const s = Number(e.start_col);
+      const t = Number(e.end_col);
+      if (!(t > s)) continue;
+
+      const values = e.sampled_values || [];
+      const allTypes = e.types || {};
+      const total = Number(e.total) || 0;
+      const label = e.kind === "arg" && e.name ? `arg ${e.name}` : null;
+
+      let valueText;
+      if (total === 0) {
+        valueText = label ? `${label}: (not hit)` : "(not hit)";
+      } else {
+        const summary = summarizeValues(values, total, allTypes);
+        if (label) {
+          valueText = summary ? `${label}: ${summary}` : label;
+        } else {
+          valueText = summary;
+        }
+      }
+
+      const tooltipHtml = escHtml(valueText);
+      const depthClass = `depth-${e.depth || 1}`;
+      const missClass = total === 0 && !e.suppress_miss ? " miss" : "";
+      const keyAttr = escHtml(e.key_id || "");
+      const openTag = `<span class=\\"expr hit ${depthClass}${missClass}\\" data-key=\\"${keyAttr}\\">`;
+
+      let closeTag = "</span>";
+      if (e.marker !== false) {
+        let marker = "🔎";
+        if (total === 0) marker = "∅";
+        else if (e.kind === "arg") marker = "🧷";
+
+        let markerClass = "marker";
+        if (total === 0 && !e.suppress_miss) markerClass = "marker miss";
+        if (e.kind === "arg") markerClass += " arg";
+        closeTag = `<span class=\\"${markerClass}\\" data-key=\\"${keyAttr}\\" aria-hidden=\\"true\\">${marker}<span class=\\"tooltip\\">${tooltipHtml}</span></span></span>`;
+      }
+
+      const len = t - s;
+      (opens[s] ||= []).push({ len, start: s, end: t, tag: openTag });
+      (closes[t] ||= []).push({ len, start: s, end: t, tag: closeTag });
+    }
+
+    const positions = Array.from(new Set([
+      ...Object.keys(opens).map(Number),
+      ...Object.keys(closes).map(Number)
+    ])).sort((a, b) => a - b);
+
+    let out = "";
+    let cursor = 0;
+
+    for (const pos of positions) {
+      if (pos > cursor) out += escHtml(lineText.slice(cursor, pos));
+      if (closes[pos]) {
+        closes[pos]
+          .slice()
+          .sort((a, b) => (b.start - a.start) || (a.len - b.len))
+          .forEach((c) => { out += c.tag; });
+      }
+      if (opens[pos]) {
+        opens[pos]
+          .slice()
+          .sort((a, b) => b.end - a.end)
+          .forEach((o) => { out += o.tag; });
+      }
+      cursor = pos;
+    }
+
+    if (cursor < lineText.length) out += escHtml(lineText.slice(cursor));
+    return out;
+  }
+
+  function buildLineNode(lineno, lineText, lineClass, innerHtml, options) {
+    const opts = options || {};
+    const line = document.createElement("span");
+    line.className = `line${lineClass}`;
+    line.dataset.line = String(lineno);
+    line.id = `line-${lineno}`;
+
+    const ln = opts.lineHref ? document.createElement("a") : document.createElement("span");
+    ln.className = `ln${opts.lineHref ? " ln-link" : ""}`;
+    ln.textContent = String(lineno);
+    if (opts.lineHref) {
+      ln.href = opts.lineHref(lineno);
+      ln.title = `Link to line ${lineno}`;
+      ln.addEventListener("click", (event) => {
+        if (!opts.onLineClick) return;
+        if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+        event.preventDefault();
+        opts.onLineClick(lineno);
+      });
+    }
+    line.appendChild(ln);
+    line.appendChild(document.createTextNode(" "));
+
+    if (innerHtml == null) {
+      line.appendChild(document.createTextNode(lineText));
+    } else {
+      const wrapper = document.createElement("span");
+      wrapper.innerHTML = innerHtml;
+      while (wrapper.firstChild) line.appendChild(wrapper.firstChild);
+    }
+
+    return line;
+  }
+
+  function buildEllipsisNode() {
+    const line = document.createElement("span");
+    line.className = "line ellipsis";
+    line.dataset.line = "...";
+
+    const ln = document.createElement("span");
+    ln.className = "ln";
+    ln.textContent = "...";
+    line.appendChild(ln);
+    return line;
+  }
+
+  function renderFileSection(file, fileIndex, options) {
+    const opts = options || {};
+    const section = document.createElement("section");
+    section.className = "file-section";
+
+    if (opts.includeTitle !== false) {
+      const h2 = document.createElement("h2");
+      h2.className = "file";
+      h2.textContent = file.display_path || file.path || `file-${fileIndex + 1}`;
+      section.appendChild(h2);
+    }
+
+    const pre = document.createElement("pre");
+    pre.className = "code";
+    const code = document.createElement("code");
+    pre.appendChild(code);
+
+    const lines = sourceLines(file.source || "");
+    const ranges = Array.isArray(file.ranges) ? file.ranges : null;
+    const trace = Array.isArray(file.trace) ? file.trace : [];
+    const { expectedByLine, executedByLine } = lineStatsForFile(trace);
+
+    let prevLineno = null;
+    let firstLineno = null;
+    let lastLineno = null;
+
+    lines.forEach((lineText, idx) => {
+      const lineno = idx + 1;
+      if (!lineInRanges(lineno, ranges)) return;
+      if (firstLineno == null) firstLineno = lineno;
+      if (prevLineno != null && lineno > prevLineno + 1) {
+        code.appendChild(buildEllipsisNode());
+      }
+
+      const evs = aggregateEventsForLine(trace, lineno, lineText.length, fileIndex);
+      const expected = expectedByLine[lineno] || 0;
+      const executed = executedByLine[lineno] || 0;
+      const lineClass = lineClassFor(expected, executed);
+      if (expected > 0 && executed === 0) {
+        evs.forEach((e) => { e.suppress_miss = true; });
+      }
+
+      if (evs.length === 0) {
+        code.appendChild(buildLineNode(lineno, lineText, lineClass, null, opts));
+      } else {
+        code.appendChild(buildLineNode(lineno, lineText, lineClass, renderLineHtml(lineText, evs), opts));
+      }
+
+      prevLineno = lineno;
+      lastLineno = lineno;
+    });
+
+    if (firstLineno != null && firstLineno > 1) {
+      code.insertBefore(buildEllipsisNode(), code.firstChild);
+    }
+    if (lastLineno != null && lastLineno < lines.length) {
+      code.appendChild(buildEllipsisNode());
+    }
+
+    section.appendChild(pre);
+    return section;
+  }
+
+  function bindMarkerHover(root) {
+    root.querySelectorAll(".marker").forEach((marker) => {
+      marker.addEventListener("mouseenter", () => {
+        root.querySelectorAll(".expr.active").forEach((el) => el.classList.remove("active"));
+        const key = marker.dataset.key;
+        if (key) {
+          root.querySelectorAll(`.expr[data-key=\\"${key}\\"]`).forEach((el) => el.classList.add("active"));
+        } else {
+          const expr = marker.closest(".expr");
+          if (expr) expr.classList.add("active");
+        }
+      });
+      marker.addEventListener("mouseleave", () => {
+        const key = marker.dataset.key;
+        if (key) {
+          root.querySelectorAll(`.expr[data-key=\\"${key}\\"]`).forEach((el) => el.classList.remove("active"));
+        } else {
+          const expr = marker.closest(".expr");
+          if (expr) expr.classList.remove("active");
+        }
+      });
+    });
+  }
+
+  function fileDisplayPath(file, idx) {
+    return String((file && (file.display_path || file.path)) || `file-${idx + 1}`);
+  }
+
+  function fileUrlKey(file, idx) {
+    return fileDisplayPath(file, idx).replace(/\\\\/g, "/");
+  }
+
+  function encodeHashFileKey(key) {
+    return encodeURIComponent(String(key || "")).replace(/%2F/g, "/");
+  }
+
+  function decodeHashFileKey(value) {
+    try {
+      return decodeURIComponent(String(value || ""));
+    } catch (_e) {
+      return String(value || "");
+    }
+  }
+
+  function parseHashStateFromLocation() {
+    const raw = String(window.location.hash || "").replace(/^#/, "");
+    if (!raw) return { fileKey: null, line: null };
+
+    if (!raw.includes("=")) {
+      return { fileKey: decodeHashFileKey(raw), line: null };
+    }
+
+    const params = new URLSearchParams(raw);
+    const fileRaw = params.get("file");
+    const lineRaw = params.get("line");
+    const lineNum = lineRaw == null ? null : Number.parseInt(lineRaw, 10);
+
+    return {
+      fileKey: fileRaw ? decodeHashFileKey(fileRaw) : null,
+      line: Number.isFinite(lineNum) && lineNum > 0 ? lineNum : null
+    };
+  }
+
+  function buildHashForSelection(fileKey, line) {
+    const parts = [];
+    if (fileKey) parts.push(`file=${encodeHashFileKey(fileKey)}`);
+    if (line && Number(line) > 0) parts.push(`line=${Number(line)}`);
+    return `#${parts.join("&")}`;
+  }
+
+  function setLocationHashSelection(fileKey, line) {
+    const hash = buildHashForSelection(fileKey, line);
+    if (window.location.hash === hash) return;
+    if (window.history && typeof window.history.replaceState === "function") {
+      try {
+        window.history.replaceState(null, "", hash);
+        return;
+      } catch (_e) {
+        // `about:srcdoc` (runv preview) can reject replaceState with a file:// hash URL.
+      }
+    }
+    try {
+      window.location.hash = hash;
+    } catch (_e) {
+      // Ignore hash update failures in restricted embedding contexts.
+    }
+  }
+
+  function buildFileTree(files) {
+    const root = { dirs: new Map(), files: [] };
+
+    files.forEach((file, idx) => {
+      const key = fileUrlKey(file, idx);
+      const display = fileDisplayPath(file, idx).replace(/\\\\/g, "/");
+      const parts = display.split("/").filter(Boolean);
+      const filename = parts.pop() || display || `file-${idx + 1}`;
+
+      let node = root;
+      let currentPath = "";
+      for (const part of parts) {
+        currentPath = currentPath ? `${currentPath}/${part}` : part;
+        if (!node.dirs.has(part)) {
+          node.dirs.set(part, { name: part, path: currentPath, dirs: new Map(), files: [] });
+        }
+      node = node.dirs.get(part);
+    }
+      const coverage = expressionLineCoverageForTrace(Array.isArray(file.trace) ? file.trace : []);
+      const coverageText = coverage.expected > 0 ? ` (${coverage.executed}/${coverage.expected})` : "";
+      node.files.push({ label: filename, key, file, index: idx, path: display, coverageText });
+    });
+
+    return root;
+  }
+
+  function treeNodeContainsSelection(node, selectedKey) {
+    if (!node) return false;
+    if ((node.files || []).some((f) => f.key === selectedKey)) return true;
+    for (const child of (node.dirs || new Map()).values()) {
+      if (treeNodeContainsSelection(child, selectedKey)) return true;
+    }
+    return false;
+  }
+
+  function renderFileTreeNode(node, selectedKey, onSelect, level) {
+    const ul = document.createElement("ul");
+    ul.className = "tree-list";
+    ul.dataset.level = String(level || 0);
+
+    const dirs = Array.from((node.dirs || new Map()).values()).sort((a, b) => a.name.localeCompare(b.name));
+    const files = Array.from(node.files || []).sort((a, b) => a.path.localeCompare(b.path));
+
+    dirs.forEach((dirNode) => {
+      const li = document.createElement("li");
+      li.className = "tree-dir";
+
+      const details = document.createElement("details");
+      details.className = "tree-folder";
+      details.open = true;
+
+      const summary = document.createElement("summary");
+      summary.className = "tree-folder-label";
+      summary.textContent = dirNode.name;
+      details.appendChild(summary);
+
+      details.appendChild(renderFileTreeNode(dirNode, selectedKey, onSelect, (level || 0) + 1));
+      li.appendChild(details);
+      ul.appendChild(li);
+    });
+
+    files.forEach((entry) => {
+      const li = document.createElement("li");
+      li.className = "tree-file";
+
+      const btn = document.createElement("button");
+      btn.type = "button";
+      btn.className = "tree-file-btn";
+      const name = document.createElement("span");
+      name.className = "tree-file-name";
+      name.textContent = entry.label;
+      btn.appendChild(name);
+
+      if (entry.coverageText) {
+        const meta = document.createElement("span");
+        meta.className = "tree-file-meta";
+        meta.textContent = entry.coverageText;
+        btn.appendChild(meta);
+      }
+
+      btn.dataset.fileKey = entry.key;
+      if (entry.key === selectedKey) {
+        btn.classList.add("active");
+        btn.setAttribute("aria-current", "page");
+      }
+      btn.addEventListener("click", () => onSelect(entry.key));
+      li.appendChild(btn);
+      ul.appendChild(li);
+    });
+
+    return ul;
+  }
+
+  function preferredInitialFileKey(files) {
+    if (!files || files.length === 0) return null;
+    const hashKey = parseHashStateFromLocation().fileKey;
+    if (hashKey) {
+      const byDisplay = files.find((file, idx) => fileUrlKey(file, idx) === hashKey);
+      if (byDisplay) return fileUrlKey(byDisplay, files.indexOf(byDisplay));
+
+      const byPath = files.find((file) => String(file.path || "") === hashKey);
+      if (byPath) return fileUrlKey(byPath, files.indexOf(byPath));
+    }
+    return fileUrlKey(files[0], 0);
+  }
+
+  function preferredInitialLineNumber() {
+    return parseHashStateFromLocation().line;
+  }
+
+  function focusLineInViewer(viewer, lineno) {
+    viewer.querySelectorAll(".line.line-target").forEach((el) => el.classList.remove("line-target"));
+    if (!(lineno > 0)) return;
+    const target = viewer.querySelector(`.line[data-line="${lineno}"]`);
+    if (!target) return;
+    target.classList.add("line-target");
+    if (typeof target.scrollIntoView === "function") {
+      target.scrollIntoView({ block: "center", inline: "nearest" });
+    }
+  }
+
+  function render(payload) {
+    app.textContent = "";
+
+    const files = payload && Array.isArray(payload.files) ? payload.files : [];
+    if (files.length === 0) {
+      const empty = document.createElement("p");
+      empty.className = "hint";
+      empty.textContent = "No files to render.";
+      app.appendChild(empty);
+      return;
+    }
+
+    const hint = document.createElement("div");
+    hint.className = "hint";
+    hint.textContent = "Hover highlighted text to see recorded values.";
+    app.appendChild(hint);
+
+    const mode = document.createElement("div");
+    mode.className = "mode";
+    mode.textContent = payload && payload.meta && payload.meta.mode_text ? payload.meta.mode_text : "";
+
+    const commandText = payload && payload.meta && payload.meta.command ? String(payload.meta.command) : "";
+    if (commandText) {
+      const command = document.createElement("div");
+      command.className = "command";
+      command.textContent = `Command: ${commandText}`;
+      app.appendChild(command);
+    }
+
+    app.appendChild(mode);
+
+    const shell = document.createElement("div");
+    shell.className = `report-layout${files.length <= 1 ? " single-file" : ""}`;
+    app.appendChild(shell);
 
+    const sidebar = document.createElement("aside");
+    sidebar.className = "report-sidebar";
+    shell.appendChild(sidebar);
+
+    const treeTitle = document.createElement("div");
+    treeTitle.className = "tree-title";
+    treeTitle.textContent = `Files (${files.length})`;
+    sidebar.appendChild(treeTitle);
+
+    const treeMount = document.createElement("div");
+    treeMount.className = "tree-scroll";
+    sidebar.appendChild(treeMount);
+
+    const main = document.createElement("section");
+    main.className = "report-main";
+    shell.appendChild(main);
+
+    const mainHead = document.createElement("div");
+    mainHead.className = "report-main-head";
+    main.appendChild(mainHead);
+
+    const currentPath = document.createElement("div");
+    currentPath.className = "current-file";
+    mainHead.appendChild(currentPath);
+
+    const viewer = document.createElement("div");
+    viewer.className = "report-viewer";
+    main.appendChild(viewer);
+
+    const fileKeyToEntry = new Map();
+    files.forEach((file, idx) => fileKeyToEntry.set(fileUrlKey(file, idx), { file, idx }));
+
+    let selectedKey = preferredInitialFileKey(files);
+    let selectedLine = preferredInitialLineNumber();
+
+    function renderTree() {
+      treeMount.textContent = "";
+      const treeRoot = buildFileTree(files);
+      treeMount.appendChild(renderFileTreeNode(treeRoot, selectedKey, (key) => selectFile(key, true, null), 0));
+    }
+
+    function renderSelectedFile() {
+      viewer.textContent = "";
+      const entry = fileKeyToEntry.get(selectedKey);
+      if (!entry) return;
+
+      currentPath.textContent = fileDisplayPath(entry.file, entry.idx);
+
+      viewer.appendChild(renderFileSection(entry.file, entry.idx, {
+        includeTitle: false,
+        lineHref: (lineno) => buildHashForSelection(selectedKey, lineno),
+        onLineClick: (lineno) => selectLine(lineno, true)
+      }));
+      bindMarkerHover(viewer);
+      focusLineInViewer(viewer, selectedLine);
+    }
+
+    function selectLine(lineno, updateHash) {
+      const n = Number(lineno);
+      selectedLine = Number.isFinite(n) && n > 0 ? n : null;
+      renderSelectedFile();
+      if (updateHash) setLocationHashSelection(selectedKey, selectedLine);
+    }
+
+    function selectFile(key, updateHash, nextLine) {
+      if (!fileKeyToEntry.has(key)) return;
+      if (arguments.length >= 3) {
+        selectedLine = nextLine && Number(nextLine) > 0 ? Number(nextLine) : null;
+      } else if (key !== selectedKey) {
+        selectedLine = null;
+      }
+      selectedKey = key;
+      renderTree();
+      renderSelectedFile();
+      if (updateHash) setLocationHashSelection(key, selectedLine);
+    }
+
+    window.addEventListener("hashchange", () => {
+      const state = parseHashStateFromLocation();
+      if (state.fileKey && state.fileKey !== selectedKey && fileKeyToEntry.has(state.fileKey)) {
+        selectFile(state.fileKey, false, state.line);
+        return;
+      }
+      if (state.fileKey === selectedKey || (!state.fileKey && selectedKey)) {
+        selectedLine = state.line;
+        renderSelectedFile();
+      }
+    });
+
+    selectFile(selectedKey, true);
+  }
+
+  try {
+    const payload = JSON.parse(payloadEl.textContent || "{}");
+    render(payload);
+  } catch (error) {
+    app.textContent = `Failed to render Lumitrace HTML: ${error}`;
+  }
+})();'
+end
+
+  def self.html_report_styles
+    <<~CSS
+      body { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: #f7f5f0; color: #1f1f1f; padding: 24px; }
+      .report-layout { display: grid; grid-template-columns: minmax(220px, 320px) minmax(0, 1fr); gap: 16px; align-items: start; }
+      .report-layout.single-file { grid-template-columns: minmax(0, 1fr); }
+      .report-sidebar { background: #fffdf7; border: 1px solid #e5dfd0; border-radius: 8px; padding: 12px; position: sticky; top: 16px; max-height: calc(100vh - 48px); overflow: hidden; }
+      .report-layout.single-file .report-sidebar { display: none; }
+      .tree-title { color: #444; font-size: 12px; margin-bottom: 8px; }
+      .tree-scroll { overflow: auto; max-height: calc(100vh - 96px); }
+      .tree-list { list-style: none; margin: 0; padding: 0; }
+      .tree-list[data-level]:not([data-level="0"]) { margin-left: 14px; border-left: 1px dashed #e5dfd0; padding-left: 8px; }
+      .tree-dir, .tree-file { margin: 2px 0; }
+      .tree-folder { }
+      .tree-folder-label { cursor: pointer; color: #4d473f; user-select: none; }
+      .tree-folder-label::marker { color: #999; }
+      .tree-file-btn { width: 100%; text-align: left; border: 0; background: transparent; color: #2a2a2a; padding: 4px 6px; border-radius: 6px; cursor: pointer; font: inherit; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
+      .tree-file-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+      .tree-file-meta { color: #6f6a62; font-size: 12px; white-space: nowrap; }
+      .tree-file-btn:hover { background: #fff2c6; }
+      .tree-file-btn.active { background: #f0ffe7; color: #1b5e3d; }
+      .tree-file-btn.active .tree-file-meta { color: #1b5e3d; }
+      .report-main { min-width: 0; }
+      .report-main-head { display: flex; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 8px; }
+      .current-file { color: #333; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+      .report-viewer { min-width: 0; }
+      .file-section { min-width: 0; }
+      .code { background: #fffdf7; border: 1px solid #e5dfd0; border-radius: 8px; padding: 16px; line-height: 1.5; }
+      .line { display: block; box-sizing: border-box; padding: 2px 8px; }
+      .line:hover { background: #fff2c6; }
+      .line.hit { background: #f0ffe7; }
+      .line.miss { background: #ffecec; }
+      .line.line-target { box-shadow: inset 3px 0 #2f6f8e; background: #e9f4fb; }
+      .line.ellipsis { color: #999; }
+      .ln { display: inline-block; width: 3em; color: #888; user-select: none; }
+      .ln-link { color: inherit; text-decoration: none; }
+      .ln-link:hover { text-decoration: underline; color: #2f6f8e; }
+      .hint { color: #666; margin-bottom: 4px; }
+      .command { color: #555; margin-bottom: 4px; font-size: 12px; overflow-wrap: anywhere; }
+      .mode { color: #444; margin-bottom: 8px; }
+      .report-footer { margin-top: 16px; color: #666; font-size: 12px; }
+      .report-footer a { color: #2f6f8e; text-decoration: none; }
+      .report-footer a:hover { text-decoration: underline; }
+      .file { margin: 24px 0 8px; font-size: 16px; color: #333; }
+      .expr { position: relative; display: inline-block; padding-bottom: 1px; }
+      .expr.hit { }
+      .expr.depth-1 { --hl: #7fbf7f; }
+      .expr.depth-2 { --hl: #6fa8ff; }
+      .expr.depth-3 { --hl: #ffb347; }
+      .expr.depth-4 { --hl: #d78bff; }
+      .expr.depth-5 { --hl: #ff6f91; }
+      .expr.active { background: rgba(127, 191, 127, 0.15); box-shadow: inset 0 -2px var(--hl, #7fbf7f); }
+      .expr.miss { background: rgba(255, 120, 120, 0.18); box-shadow: inset 0 -2px rgba(200, 120, 120, 0.6); }
+      .marker { position: relative; display: inline-block; margin-left: 4px; cursor: help; font-size: 10px; line-height: 1; user-select: none; -webkit-user-select: none; -moz-user-select: none; }
+      .marker.miss { color: #c07070; }
+      .marker.arg { color: #2f6f8e; }
+      .marker .tooltip {
+        display: none;
+        position: absolute;
+        left: 0;
+        bottom: 100%;
+        margin-bottom: 6px;
+        background: #2b2b2b;
+        color: #fff;
+        padding: 4px 6px;
+        border-radius: 4px;
+        font-size: 12px;
+        white-space: pre;
+        min-width: 16ch;
+        max-width: 90vw;
+        overflow-x: auto;
+        overflow-y: hidden;
+        z-index: 10;
+        pointer-events: auto;
+      }
+      .marker:hover .tooltip,
+      .marker:focus-within .tooltip,
+      .marker .tooltip:hover { display: block; }
+      .noscript { color: #666; }
+      @media (max-width: 900px) {
+        body { padding: 16px; }
+        .report-layout { grid-template-columns: 1fr; }
+        .report-sidebar { position: static; max-height: none; }
+        .tree-scroll { max-height: 220px; }
+        .report-main-head { flex-direction: column; align-items: flex-start; }
+      }
+    CSS
+  end
+
+  def self.footer_version_suffix
+    return "" unless defined?(Lumitrace::VERSION) && Lumitrace::VERSION
+    " v#{Lumitrace::VERSION}"
+  end
+
+  def self.render_payload_html(payload)
     <<~HTML
       <!doctype html>
       <html>
@@ -1352,71 +2387,22 @@ module GenerateResultedHtml
         <meta charset="utf-8">
         <title>Recorded Result View</title>
         <style>
-          body { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: #f7f5f0; color: #1f1f1f; padding: 24px; }
-          .code { background: #fffdf7; border: 1px solid #e5dfd0; border-radius: 8px; padding: 16px; line-height: 1.5; }
-          .line { display: inline-block; width: 100%; box-sizing: border-box; padding: 2px 8px; }
-          .line:hover { background: #fff2c6; }
-          .line.hit { background: #f0ffe7; }
-          .line.miss { background: #ffecec; }
-          .line.ellipsis { color: #999; }
-          .ln { display: inline-block; width: 3em; color: #888; user-select: none; }
-          .hint { color: #666; margin-bottom: 4px; }
-          .mode { color: #444; margin-bottom: 8px; }
-          .expr { position: relative; display: inline-block; padding-bottom: 1px; }
-          .expr.hit { }
-          .expr.depth-1 { --hl: #7fbf7f; }
-          .expr.depth-2 { --hl: #6fa8ff; }
-          .expr.depth-3 { --hl: #ffb347; }
-          .expr.depth-4 { --hl: #d78bff; }
-          .expr.depth-5 { --hl: #ff6f91; }
-          .expr.active { background: rgba(127, 191, 127, 0.15); box-shadow: inset 0 -2px var(--hl, #7fbf7f); }
-          .expr.miss { background: rgba(255, 120, 120, 0.18); box-shadow: inset 0 -2px rgba(200, 120, 120, 0.6); }
-          .marker { position: relative; display: inline-block; margin-left: 4px; cursor: help; font-size: 10px; line-height: 1; user-select: none; -webkit-user-select: none; -moz-user-select: none; }
-          .marker.miss { color: #c07070; }
-          .marker.arg { color: #2f6f8e; }
-          .marker .tooltip {
-            display: none;
-            position: absolute;
-            left: 0;
-            top: 100%;
-            margin-top: 4px;
-            background: #2b2b2b;
-            color: #fff;
-            padding: 4px 6px;
-            border-radius: 4px;
-            font-size: 12px;
-            white-space: pre;
-            min-width: 16ch;
-            max-width: 90vw;
-            overflow-x: auto;
-            overflow-y: hidden;
-            z-index: 10;
-            pointer-events: auto;
-          }
-          .marker:hover .tooltip,
-          .marker:focus-within .tooltip,
-          .marker .tooltip:hover { display: block; }
+      #{html_report_styles}
         </style>
       </head>
       <body>
-        <div class="hint">Hover highlighted text to see recorded values.</div>
-        <div class="mode">#{esc(mode_info[:text])}</div>
-        <pre class="code"><code>
-      #{html_lines.join("")}
-        </code></pre>
+        <div id="lumitrace-app"></div>
+        <div class="report-footer">Generated by <a href="https://ko1.github.io/lumitrace/" target="_blank" rel="noopener noreferrer">lumitrace</a>#{footer_version_suffix}.</div>
+        <noscript><p class="noscript">Lumitrace HTML report requires JavaScript to render the source and trace view.</p></noscript>
+        <script id="lumitrace-payload" type="application/json">#{payload_json_for_script(payload)}#{'</scr' + 'ipt>'}
+        <script>
+      #{html_renderer_js}
+        #{'</scr' + 'ipt>'}
       </body>
       </html>
     HTML
   end
 
-  def self.esc(s)
-    s.to_s
-      .gsub("&", "&amp;")
-      .gsub("<", "&lt;")
-      .gsub(">", "&gt;")
-      .gsub('"', "&quot;")
-  end
-
   def self.detect_collect_mode(events)
     arr = Array(events)
     return "history" if arr.any? { |e| e.key?(:sampled_values) || e.key?("sampled_values") }
@@ -1566,6 +2552,7 @@ module GenerateResultedHtml
   def self.comment_value_with_total_for_line(events)
     best = best_event_for_line(events)
     return nil unless best
+    return nil if best[:total].to_i <= 0
 
     sampled_last = best[:sampled_values]&.last
     v, t = last_value_to_pair(sampled_last)
@@ -1669,9 +2656,16 @@ module GenerateResultedHtml
 
       next if t <= s
       spans << { start_col: s, end_col: t }
-      key_id = e[:key].join(":")
-      buckets[e[:key]] = {
-        key: e[:key],
+      event_key = e[:key] || [
+        e[:file],
+        e[:start_line].to_i,
+        e[:start_col].to_i,
+        e[:end_line].to_i,
+        e[:end_col].to_i
+      ]
+      key_id = event_key.join(":")
+      buckets[event_key] = {
+        key: event_key,
         key_id: key_id,
         start_col: s,
         end_col: t,
@@ -1799,34 +2793,6 @@ module GenerateResultedHtml
     ranges.any? { |(s, e)| line >= s && line <= e }
   end
 
-  def self.add_missing_events(events, source, filename, ranges)
-    expected = RecordInstrument.collect_locations_from_source(source, ranges || [])
-    existing = {}
-    events.each do |e|
-      key = [e[:file], e[:start_line], e[:start_col], e[:end_line], e[:end_col]]
-      existing[key] = true
-    end
-      expected.each do |loc|
-        key = [filename, loc[:start_line], loc[:start_col], loc[:end_line], loc[:end_col]]
-        next if existing[key]
-        events << {
-          key: key,
-          file: key[0],
-          start_line: key[1],
-          start_col: key[2],
-          end_line: key[3],
-          end_col: key[4],
-          kind: loc[:kind],
-          name: loc[:name],
-          sampled_values: [],
-          types: {},
-          total: 0
-        }
-        existing[key] = true
-      end
-    events
-  end
-
   def self.line_stats(source, ranges, events, filename)
     expected_by_line = Hash.new(0)
     RecordInstrument.collect_locations_from_source(source, ranges || []).each do |loc|
@@ -1850,293 +2816,131 @@ module GenerateResultedHtml
     [expected_by_line, executed_by_line]
   end
 
-  def self.render_all(events_path, root: Dir.pwd, ranges_by_file: nil, collect_mode: nil, max_samples: nil)
-    raw_events = JSON.parse(File.read(events_path))
-    render_all_from_events(raw_events, root: root, ranges_by_file: ranges_by_file, collect_mode: collect_mode, max_samples: max_samples)
-  end
-
-  def self.render_all_from_events(events, root: Dir.pwd, ranges_by_file: nil, collect_mode: nil, max_samples: nil)
-    mode_info = resolve_mode_info(events, collect_mode: collect_mode, max_samples: max_samples)
-    events = normalize_events(events)
-    by_file = events.group_by { |e| e[:file] }
-    ranges_by_file = normalize_ranges_by_file(ranges_by_file)
-
-    target_paths = by_file.keys
-
-    sections = target_paths.sort.map do |path|
+  def self.render_all(events_path, root: Dir.pwd, ranges_by_file: nil, collect_mode: nil, max_samples: nil, logger: nil, command_text: nil)
+    raw = JSON.parse(File.read(events_path))
+    raw_events = raw.is_a?(Hash) && raw.key?("events") ? raw["events"] : raw
+    render_all_from_events(
+      raw_events,
+      root: root,
+      ranges_by_file: ranges_by_file,
+      collect_mode: collect_mode,
+      max_samples: max_samples,
+      logger: logger,
+      command_text: command_text
+    )
+  end
+
+  def self.render_all_from_events(events, root: Dir.pwd, ranges_by_file: nil, collect_mode: nil, max_samples: nil, logger: nil, command_text: nil)
+    normalized = time_step("normalize_events", logger) { normalize_events(events) }
+    render_all_from_normalized_events(
+      normalized,
+      root: root,
+      ranges_by_file: ranges_by_file,
+      collect_mode: collect_mode,
+      max_samples: max_samples,
+      logger: logger,
+      command_text: command_text
+    )
+  end
+
+  def self.render_all_from_normalized_events(events, root: Dir.pwd, ranges_by_file: nil, collect_mode: nil, max_samples: nil, logger: nil, command_text: nil)
+    total_start = monotonic_now
+
+    mode_info = time_step("resolve_mode", logger) do
+      resolve_mode_info(events, collect_mode: collect_mode, max_samples: max_samples)
+    end
+    by_file = time_step("group_by_file", logger) { events.group_by { |e| e[:file] } }
+    ranges_by_file = time_step("normalize_ranges_by_file", logger) { normalize_ranges_by_file(ranges_by_file) }
+
+    files = []
+    by_file.keys.sort.each do |path|
       next unless File.exist?(path)
+      file_start = monotonic_now
+      read_start = logger ? monotonic_now : nil
       src = File.read(path)
+      read_ms = read_start ? (monotonic_now - read_start) * 1000.0 : nil
       if ranges_by_file
         next unless ranges_by_file.key?(path)
         ranges = ranges_by_file[path] || []
       else
         ranges = nil
       end
-      file_events = add_missing_events((by_file[path] || []).dup, src, path, ranges)
-      expected_by_line, executed_by_line = line_stats(src, ranges, file_events, path)
-      html_lines = []
-      prev_lineno = nil
-      first_lineno = nil
-      last_lineno = nil
-      src.lines.each_with_index do |line, idx|
-        lineno = idx + 1
-        next if ranges && !line_in_ranges?(lineno, ranges)
-        first_lineno ||= lineno
-        if prev_lineno && lineno > prev_lineno + 1
-          html_lines << "<span class=\"line ellipsis\" data-line=\"...\"><span class=\"ln\">...</span></span>\n"
-        end
-        line_text = line.chomp
-        evs = aggregate_events_for_line(file_events, lineno, line_text.length)
-        expected = expected_by_line[lineno]
-        executed = executed_by_line[lineno]
-        line_class = line_class_for(expected, executed)
-        if expected > 0 && executed == 0
-          evs.each { |e| e[:suppress_miss] = true }
-        end
-        if evs.empty?
-          html_lines << "<span class=\"line#{line_class}\" data-line=\"#{lineno}\"><span class=\"ln\">#{lineno}</span> #{esc(line_text)}</span>\n"
-        else
-          rendered = render_line_with_events(line_text, evs)
-          html_lines << "<span class=\"line#{line_class}\" data-line=\"#{lineno}\"><span class=\"ln\">#{lineno}</span> #{rendered}</span>\n"
-        end
-        prev_lineno = lineno
-        last_lineno = lineno
-      end
-      if first_lineno && first_lineno > 1
-        html_lines.unshift("<span class=\"line ellipsis\" data-line=\"...\"><span class=\"ln\">...</span></span>\n")
-      end
-      if last_lineno && last_lineno < src.lines.length
-        html_lines << "<span class=\"line ellipsis\" data-line=\"...\"><span class=\"ln\">...</span></span>\n"
+      rel = path.start_with?(root) ? path.sub(root + File::SEPARATOR, "") : path
+      select_start = logger ? monotonic_now : nil
+      file_events = by_file[path] || []
+      select_ms = select_start ? (monotonic_now - select_start) * 1000.0 : nil
+      payload_file_start = logger ? monotonic_now : nil
+      files << build_html_payload_file(
+        path: path,
+        display_path: rel,
+        source: src,
+        ranges: ranges,
+        trace_events: file_events,
+        logger: logger
+      )
+      payload_file_ms = payload_file_start ? (monotonic_now - payload_file_start) * 1000.0 : nil
+      if logger
+        elapsed_ms = (monotonic_now - file_start) * 1000.0
+        logger.call(format("html render: file %s read=%.1fms select=%.1fms payload=%.1fms events=%d bytes=%d total=%.1fms", rel, read_ms, select_ms, payload_file_ms, file_events.length, src.bytesize, elapsed_ms))
       end
+    end
 
-      rel = path.start_with?(root) ? path.sub(root + File::SEPARATOR, "") : path
-      <<~HTML
-        <h2 class="file">#{esc(rel)}</h2>
-        <pre class="code"><code>
-      #{html_lines.join("")}
-        </code></pre>
-      HTML
-    end.compact.join("\n")
+    payload = time_step("build_payload", logger) { build_html_payload(mode_info: mode_info, files: files, command_text: command_text) }
+    html = time_step("render_payload_html", logger) { render_payload_html(payload) }
+    if logger
+      total_ms = (monotonic_now - total_start) * 1000.0
+      logger.call(format("html render: total files=%d events=%d html_bytes=%d %.1fms", files.length, events.length, html.bytesize, total_ms))
+    end
+    html
+  end
 
-    <<~HTML
-      <!doctype html>
-      <html>
-      <head>
-        <meta charset="utf-8">
-        <title>Recorded Result View</title>
-        <style>
-          body { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: #f7f5f0; color: #1f1f1f; padding: 24px; }
-          .code { background: #fffdf7; border: 1px solid #e5dfd0; border-radius: 8px; padding: 16px; line-height: 1.5; }
-          .line { display: inline-block; width: 100%; box-sizing: border-box; padding: 2px 8px; }
-          .line:hover { background: #fff2c6; }
-          .line.hit { background: #f0ffe7; }
-          .line.miss { background: #ffecec; }
-          .line.ellipsis { color: #999; }
-          .ln { display: inline-block; width: 3em; color: #888; user-select: none; }
-          .hint { color: #666; margin-bottom: 4px; }
-          .mode { color: #444; margin-bottom: 8px; }
-          .file { margin: 24px 0 8px; font-size: 16px; color: #333; }
-          .expr { position: relative; display: inline-block; padding-bottom: 1px; }
-          .expr.hit { }
-          .expr.depth-1 { --hl: #7fbf7f; }
-          .expr.depth-2 { --hl: #6fa8ff; }
-          .expr.depth-3 { --hl: #ffb347; }
-          .expr.depth-4 { --hl: #d78bff; }
-          .expr.depth-5 { --hl: #ff6f91; }
-          .expr.active { background: rgba(127, 191, 127, 0.15); box-shadow: inset 0 -2px var(--hl, #7fbf7f); }
-          .expr.miss { background: rgba(255, 120, 120, 0.18); box-shadow: inset 0 -2px rgba(200, 120, 120, 0.6); }
-          .marker { position: relative; display: inline-block; margin-left: 4px; cursor: help; font-size: 10px; line-height: 1; user-select: none; -webkit-user-select: none; -moz-user-select: none; }
-          .marker.miss { color: #c07070; }
-          .marker.arg { color: #2f6f8e; }
-          .marker .tooltip {
-            display: none;
-            position: absolute;
-            left: 0;
-            top: 100%;
-            margin-top: 4px;
-            background: #2b2b2b;
-            color: #fff;
-            padding: 4px 6px;
-            border-radius: 4px;
-            font-size: 12px;
-            white-space: pre;
-            min-width: 16ch;
-            max-width: 90vw;
-            overflow-x: auto;
-            overflow-y: hidden;
-            z-index: 10;
-            pointer-events: auto;
-          }
-          .marker:hover .tooltip,
-          .marker:focus-within .tooltip,
-          .marker .tooltip:hover { display: block; }
-        </style>
-      </head>
-      <body>
-        <div class="hint">Hover highlighted text to see recorded values.</div>
-        <div class="mode">#{esc(mode_info[:text])}</div>
-        #{sections}
-        <script>
-          (function() {
-            document.querySelectorAll('.marker').forEach(marker => {
-              marker.addEventListener('mouseenter', () => {
-                document.querySelectorAll('.expr').forEach(e => e.classList.remove('active'));
-                const key = marker.dataset.key;
-                if (key) {
-                  document.querySelectorAll(`.expr[data-key="${key}"]`).forEach(e => e.classList.add('active'));
-                } else {
-                  marker.closest('.expr')?.classList.add('active');
-                }
-              });
-              marker.addEventListener('mouseleave', () => {
-                const key = marker.dataset.key;
-                if (key) {
-                  document.querySelectorAll(`.expr[data-key="${key}"]`).forEach(e => e.classList.remove('active'));
-                } else {
-                  marker.closest('.expr')?.classList.remove('active');
-                }
-              });
-            });
-          })();
-        #{'</scr' + 'ipt>'}
-      </body>
-      </html>
-    HTML
+  def self.render_source_from_events(source, events, filename: "script.rb", ranges: nil, collect_mode: nil, max_samples: nil, command_text: nil)
+    render_source_from_normalized_events(
+      source,
+      normalize_events(events),
+      filename: filename,
+      ranges: ranges,
+      collect_mode: collect_mode,
+      max_samples: max_samples,
+      command_text: command_text
+    )
   end
 
-  def self.render_source_from_events(source, events, filename: "script.rb", ranges: nil, collect_mode: nil, max_samples: nil)
+  def self.render_source_from_normalized_events(source, events, filename: "script.rb", ranges: nil, collect_mode: nil, max_samples: nil, command_text: nil)
     mode_info = resolve_mode_info(events, collect_mode: collect_mode, max_samples: max_samples)
-    events = normalize_events(events)
     ranges = normalize_ranges(ranges)
-    target_events = add_missing_events(events.select { |e| e[:file] == filename }, source, filename, ranges)
-    expected_by_line, executed_by_line = line_stats(source, ranges, target_events, filename)
+    target_events = events.select { |e| e[:file] == filename }
 
-    html_lines = []
-    prev_lineno = nil
-    first_lineno = nil
-    last_lineno = nil
-    source.lines.each_with_index do |line, idx|
-      lineno = idx + 1
-      next if ranges && !line_in_ranges?(lineno, ranges)
-      first_lineno ||= lineno
-      if prev_lineno && lineno > prev_lineno + 1
-        html_lines << "<span class=\"line ellipsis\" data-line=\"...\"><span class=\"ln\">...</span></span>\n"
-      end
-      line_text = line.chomp
-      evs = aggregate_events_for_line(target_events, lineno, line_text.length)
-      expected = expected_by_line[lineno]
-      executed = executed_by_line[lineno]
-      line_class = line_class_for(expected, executed)
-      if expected > 0 && executed == 0
-        evs.each { |e| e[:suppress_miss] = true }
-      end
-      if evs.empty?
-        html_lines << "<span class=\"line#{line_class}\" data-line=\"#{lineno}\"><span class=\"ln\">#{lineno}</span> #{esc(line_text)}</span>\n"
-      else
-        rendered = render_line_with_events(line_text, evs)
-        html_lines << "<span class=\"line#{line_class}\" data-line=\"#{lineno}\"><span class=\"ln\">#{lineno}</span> #{rendered}</span>\n"
-      end
-      prev_lineno = lineno
-      last_lineno = lineno
-    end
-    if first_lineno && first_lineno > 1
-      html_lines.unshift("<span class=\"line ellipsis\" data-line=\"...\"><span class=\"ln\">...</span></span>\n")
-    end
-    if last_lineno && last_lineno < source.lines.length
-      html_lines << "<span class=\"line ellipsis\" data-line=\"...\"><span class=\"ln\">...</span></span>\n"
-    end
+    payload = build_html_payload(
+      mode_info: mode_info,
+      command_text: command_text,
+      files: [
+        build_html_payload_file(
+          path: filename,
+          display_path: filename,
+          source: source,
+          ranges: ranges,
+          trace_events: target_events
+        )
+      ]
+    )
 
-    <<~HTML
-      <!doctype html>
-      <html>
-      <head>
-        <meta charset="utf-8">
-        <title>Recorded Result View</title>
-        <style>
-          body { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: #f7f5f0; color: #1f1f1f; padding: 24px; }
-          .code { background: #fffdf7; border: 1px solid #e5dfd0; border-radius: 8px; padding: 16px; line-height: 1.5; }
-          .line { display: inline-block; width: 100%; box-sizing: border-box; padding: 2px 8px; }
-          .line:hover { background: #fff2c6; }
-          .line.hit { background: #f0ffe7; }
-          .line.miss { background: #ffecec; }
-          .line.ellipsis { color: #999; }
-          .ln { display: inline-block; width: 3em; color: #888; user-select: none; }
-          .hint { color: #666; margin-bottom: 4px; }
-          .mode { color: #444; margin-bottom: 8px; }
-          .file { margin: 24px 0 8px; font-size: 16px; color: #333; }
-          .expr { position: relative; display: inline-block; padding-bottom: 1px; }
-          .expr.hit { }
-          .expr.depth-1 { --hl: #7fbf7f; }
-          .expr.depth-2 { --hl: #6fa8ff; }
-          .expr.depth-3 { --hl: #ffb347; }
-          .expr.depth-4 { --hl: #d78bff; }
-          .expr.depth-5 { --hl: #ff6f91; }
-          .expr.active { background: rgba(127, 191, 127, 0.15); box-shadow: inset 0 -2px var(--hl, #7fbf7f); }
-          .expr.miss { background: rgba(255, 120, 120, 0.18); box-shadow: inset 0 -2px rgba(200, 120, 120, 0.6); }
-          .marker { position: relative; display: inline-block; margin-left: 4px; cursor: help; font-size: 10px; line-height: 1; user-select: none; -webkit-user-select: none; -moz-user-select: none; }
-          .marker.miss { color: #c07070; }
-          .marker.arg { color: #2f6f8e; }
-          .marker .tooltip {
-            display: none;
-            position: absolute;
-            left: 0;
-            top: 100%;
-            margin-top: 4px;
-            background: #2b2b2b;
-            color: #fff;
-            padding: 4px 6px;
-            border-radius: 4px;
-            font-size: 12px;
-            white-space: pre;
-            min-width: 16ch;
-            max-width: 90vw;
-            overflow-x: auto;
-            overflow-y: hidden;
-            z-index: 10;
-            pointer-events: auto;
-          }
-          .marker:hover .tooltip,
-          .marker:focus-within .tooltip,
-          .marker .tooltip:hover { display: block; }
-        </style>
-      </head>
-      <body>
-        <div class="hint">Hover highlighted text to see recorded values.</div>
-        <div class="mode">#{esc(mode_info[:text])}</div>
-        <h2 class="file">#{esc(filename)}</h2>
-        <pre class="code"><code>
-      #{html_lines.join("")}
-        </code></pre>
-        <script>
-          (function() {
-            document.querySelectorAll('.marker').forEach(marker => {
-              marker.addEventListener('mouseenter', () => {
-                document.querySelectorAll('.expr').forEach(e => e.classList.remove('active'));
-                const key = marker.dataset.key;
-                if (key) {
-                  document.querySelectorAll(`.expr[data-key="${key}"]`).forEach(e => e.classList.add('active'));
-                } else {
-                  marker.closest('.expr')?.classList.add('active');
-                }
-              });
-              marker.addEventListener('mouseleave', () => {
-                const key = marker.dataset.key;
-                if (key) {
-                  document.querySelectorAll(`.expr[data-key="${key}"]`).forEach(e => e.classList.remove('active'));
-                } else {
-                  marker.closest('.expr')?.classList.remove('active');
-                }
-              });
-            });
-          })();
-        #{'</scr' + 'ipt>'}
-      </body>
-      </html>
-    HTML
+    render_payload_html(payload)
   end
 
   def self.render_text_from_events(source, events, filename: "script.rb", ranges: nil, with_header: true, header_label: nil, tty: nil)
-    events = normalize_events(events)
+    render_text_from_normalized_events(
+      source,
+      normalize_events(events),
+      filename: filename,
+      ranges: ranges,
+      with_header: with_header,
+      header_label: header_label,
+      tty: tty
+    )
+  end
+
+  def self.render_text_from_normalized_events(source, events, filename: "script.rb", ranges: nil, with_header: true, header_label: nil, tty: nil)
     ranges = normalize_ranges(ranges)
     target_events = events.select { |e| e[:file] == filename }
     term_width = tty ? terminal_width : nil
@@ -2158,7 +2962,7 @@ module GenerateResultedHtml
       ]
       next if seen[key]
       seen[key] = true
-      executed_by_line[line] += 1 if line
+      executed_by_line[line] += 1 if line && (e[:total] || e["total"]).to_i > 0
     end
 
     out = +""
@@ -2259,7 +3063,10 @@ module GenerateResultedHtml
   end
 
   def self.render_text_all_from_events(events, root: Dir.pwd, ranges_by_file: nil, tty: nil)
-    events = normalize_events(events)
+    render_text_all_from_normalized_events(normalize_events(events), root: root, ranges_by_file: ranges_by_file, tty: tty)
+  end
+
+  def self.render_text_all_from_normalized_events(events, root: Dir.pwd, ranges_by_file: nil, tty: nil)
     by_file = events.group_by { |e| e[:file] }
     ranges_by_file = normalize_ranges_by_file(ranges_by_file)
 
@@ -2273,7 +3080,7 @@ module GenerateResultedHtml
         ranges = nil
       end
       rel = path.start_with?(root) ? path.sub(root + File::SEPARATOR, "") : path
-      render_text_from_events(src, events, filename: path, ranges: ranges, with_header: true, header_label: rel, tty: tty)
+      render_text_from_normalized_events(src, events, filename: path, ranges: ranges, with_header: true, header_label: rel, tty: tty)
     end.compact
 
     header = "\n=== Lumitrace Results (text) ===\n\n"