nosoop
/
vprof


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429
							<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Source VProf Viewer</title>
<style>
  /* Layout only. A visual design pass will replace this. */
  * { box-sizing: border-box; }
  body { font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
         font-size: 13px; margin: 0; color: #111; background: #fafafa; }
  header { padding: 8px 12px; background: #1a202c; color: #fff; }
  header h1 { font-size: 16px; margin: 0 0 6px 0; }
  header .row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  header label { font-size: 12px; }
  main { padding: 12px; display: flex; flex-direction: column; gap: 12px; }
  section { background: #fff; border: 1px solid #ddd; padding: 8px; }
  h2 { font-size: 14px; margin: 0 0 6px 0; }
  h3 { font-size: 13px; margin: 10px 0 4px 0; }
  table { border-collapse: collapse; width: 100%; }
  th, td { border: 1px solid #ddd; padding: 2px 6px; text-align: left;
           font-size: 12px; vertical-align: top; }
  th { background: #f0f0f0; cursor: pointer; white-space: nowrap; }
  th.nosort { cursor: default; }
  td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
  .muted { color: #666; }
  .warn { background: #fff5e6; border: 1px solid #e0a800; padding: 6px 8px; }
  .notice { background: #e8f0fe; border: 1px solid #6b9bd2; padding: 6px 8px; }
  .summary-grid { display: flex; flex-wrap: wrap; gap: 12px 24px; }
  .summary-grid div { min-width: 120px; }
  .summary-grid .k { color: #666; font-size: 11px; }
  .summary-grid .v { font-size: 14px; font-weight: 600; }
  .controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  .controls input[type=number] { width: 90px; }
  #timeline-wrap { width: 100%; }
  #timeline { display: block; width: 100%; height: 120px; background: #fff;
              border: 1px solid #ddd; cursor: crosshair; }
  .grid2 { display: grid; grid-template-columns: minmax(0,1fr) 360px; gap: 12px; }
  @media (max-width: 900px) { .grid2 { grid-template-columns: 1fr; } }
  .toggle { cursor: pointer; user-select: none; display: inline-block; width: 12px; }
  .tree-name { white-space: nowrap; }
  .bar { display: inline-block; height: 8px; background: #6b9bd2; vertical-align: middle; }
  .progress { height: 6px; background: #ddd; width: 200px; }
  .progress > div { height: 100%; background: #2b6cb0; width: 0%; }
  .scroll { max-height: 520px; overflow: auto; }
  .hidden { display: none; }
  footer { padding: 8px 12px; color: #666; font-size: 11px; }
</style>
</head>
<body>

<header>
  <h1>Source VProf Viewer</h1>
  <div class="row">
    <label>Choose a .vprof file: <input type="file" id="file"></label>
    <button id="open-picker" class="hidden">Open with file picker&hellip;</button>
    <button id="reopen-last" class="hidden">Reopen last recording</button>
    <span id="drop-hint" class="muted">or drag &amp; drop it onto this page</span>
    <div id="progress-wrap" class="hidden">
      <div class="progress"><div id="progress-bar"></div></div>
      <span id="status" class="muted"></span>
    </div>
  </div>
</header>

<main>
  <section id="error-box" class="warn hidden"></section>

  <section id="summary-section" class="hidden">
    <h2>Recording summary</h2>
    <div id="notices"></div>
    <div id="summary" class="summary-grid"></div>
  </section>

  <section id="timeline-section" class="hidden">
    <h2>Frame timeline</h2>
    <div class="controls">
      <button id="range-all">All frames</button>
      <label>From frame <input type="number" id="range-start" min="0" step="1"></label>
      <label>to <input type="number" id="range-end" min="0" step="1"></label>
      <button id="range-apply">Apply range</button>
      <button id="frame-prev">&#9664; prev</button>
      <button id="frame-next">next &#9654;</button>
      <button id="zoom-out" title="Zoom out (mouse wheel down)">&#8722;</button>
      <button id="zoom-in" title="Zoom in (mouse wheel up)">+</button>
      <button id="zoom-selection" title="Zoom the timeline to the selected frame range">Zoom to selection</button>
      <button id="zoom-reset" title="Show all frames">Reset zoom</button>
      <span id="frame-label" class="muted"></span>
      <span id="zoom-label" class="muted"></span>
      <span id="range-status" class="muted"></span>
    </div>
    <div id="timeline-wrap"><canvas id="timeline"></canvas></div>
    <div id="timeline-caption" class="muted"></div>
  </section>

  <div class="grid2">
    <section id="tree-section" class="hidden">
      <h2>Call tree</h2>
      <div class="controls">
        <label>Filter <input type="search" id="filter" placeholder="name contains..."></label>
        <button id="expand-all">Expand all</button>
        <button id="collapse-all">Collapse all</button>
        <span id="tree-count" class="muted"></span>
      </div>
      <div class="scroll">
        <table id="tree-table">
          <thead><tr id="tree-head"></tr></thead>
          <tbody id="tree-body"></tbody>
        </table>
      </div>
    </section>

    <div>
      <section id="budget-section" class="hidden">
        <h2>Budget groups</h2>
        <div class="scroll">
          <table id="budget-table">
            <thead><tr><th class="nosort">Group</th><th class="nosort num">Calls</th>
              <th class="nosort num">Total</th><th class="nosort num">%</th></tr></thead>
            <tbody id="budget-body"></tbody>
          </table>
        </div>
      </section>

      <section id="top-section" class="hidden">
        <h2>Top nodes</h2>
        <div class="scroll">
          <table id="top-table">
            <thead><tr><th class="nosort">Scope</th><th class="nosort num">Total</th>
              <th class="nosort num">Self</th><th class="nosort num">Calls</th></tr></thead>
            <tbody id="top-body"></tbody>
          </table>
        </div>
      </section>
    </div>
  </div>
</main>

<footer>
  VProf binary format documentation: see <code>VPROF_FORMAT.md</code> in the repository.
</footer>

<!-- ===================== Parsing worker (inline, self-contained) ===================== -->
<script id="worker-src" type="text/js-worker">
"use strict";

// The 31 budget groups registered by CVProfile::CVProfile(), in fixed ID order.
var DEFAULT_BUDGET_GROUPS = [
  ["Unaccounted", 6],
  ["World Rendering", 1],
  ["Displacement_Rendering", 1],
  ["Game", 6],
  ["Player", 6],
  ["NPCs", 6],
  ["Server Animation", 6],
  ["Client_Animation", 1],
  ["Physics", 6],
  ["Static_Prop_Rendering", 1],
  ["Other_Model_Rendering", 1],
  ["Fast Path Model Rendering", 1],
  ["Light_Cache", 1],
  ["Brush_Model_Rendering", 1],
  ["Shadow_Rendering", 1],
  ["Detail_Prop_Rendering", 1],
  ["Particle/Effect_Rendering", 1],
  ["Ropes", 1],
  ["Dynamic_Light_Rendering", 1],
  ["Networking", 6],
  ["Sound", 6],
  ["VGUI", 6],
  ["FileSystem", 6],
  ["Prediction", 1],
  ["Interpolation", 1],
  ["Swap_Buffers", 1],
  ["Occlusion", 1],
  ["Overlays", 1],
  ["Tools", 5],
  ["Texture_Cache", 1],
  ["Replay", 2]
];

var TOKEN_START_FRAME = 0;
var TOKEN_ADD_NODE = 1;
var TOKEN_ADD_BUDGET_GROUP = 2;
var TOKEN_TIMINGS = 3;
var TOKEN_END_OF_FRAME = 4;
var TOKEN_FILE_FINISHED = 5;

// Retained after a parse so range queries can re-parse only a byte range
// without keeping every sample in memory.
var g_recording = null;

self.onmessage = function (e) {
  var msg = e.data;
  if (!msg) return;
  if (msg.cmd === "parse") {
    try {
      var out = parseVprof(msg.buffer, msg.opts || {});
      self.postMessage({ type: "done", result: out.result }, out.transfer);
    } catch (err) {
      self.postMessage({ type: "error", message: (err && err.message) || String(err) });
    }
  } else if (msg.cmd === "query") {
    var t0 = (self.performance && self.performance.now) ? self.performance.now() : Date.now();
    try {
      var agg = parseRange(msg.buffer, msg.startFrame, msg.endFrame);
      var t1 = (self.performance && self.performance.now) ? self.performance.now() : Date.now();
      self.postMessage({ type: "range", requestId: msg.requestId, startFrame: msg.startFrame, endFrame: msg.endFrame, aggregates: agg, ms: t1 - t0 });
    } catch (err) {
      self.postMessage({ type: "rangeError", requestId: msg.requestId, message: (err && err.message) || String(err) });
    }
  }
};

function parseVprof(buffer, opts) {
  var t0 = (self.performance && self.performance.now) ? self.performance.now() : Date.now();
  var dv = new DataView(buffer);
  var totalBytes = buffer.byteLength;
  var pos = 0;
  var decoder = new TextDecoder("utf-8");

  function u8() { return dv.getUint8(pos++); }
  function u16() { var v = dv.getUint16(pos, true); pos += 2; return v; }
  function u32() { var v = dv.getUint32(pos, true); pos += 4; return v; }
  function i32() { var v = dv.getInt32(pos, true); pos += 4; return v; }
  function cstr() {
    var start = pos;
    while (dv.getUint8(pos) !== 0) pos++;
    var s = decoder.decode(new Uint8Array(buffer, start, pos - start));
    pos++;
    return s;
  }

  if (totalBytes < 8) throw new Error("File is too small to be a .vprof recording.");

  var version = i32();
  var rootNodeId = i32();

  // ---- Budget groups (seed the 31 defaults so sparse recordings still resolve) ----
  var budgetGroups = [];
  var groupIdByName = Object.create(null);
  for (var i = 0; i < DEFAULT_BUDGET_GROUPS.length; i++) {
    var g = DEFAULT_BUDGET_GROUPS[i];
    budgetGroups.push({ id: i, name: g[0], flags: g[1], isDefault: true });
    groupIdByName[g[0]] = i;
  }
  function addBudgetGroup(name, flags) {
    var id = groupIdByName[name];
    if (id !== undefined) { budgetGroups[id].flags = flags; return id; }
    id = budgetGroups.length;
    budgetGroups.push({ id: id, name: name, flags: flags, isDefault: false });
    groupIdByName[name] = id;
    return id;
  }

  // ---- Nodes (sparse array indexed by unique node id) ----
  var nodesById = [];
  // Frame index in which each node was first declared. Because
  // CVProfNode::GetSubNode() only ever *prepends*, the children order at any
  // frame is the final order restricted to nodes whose addedFrame <= frame.
  // That lets a range be parsed without replaying structure from the start.
  var nodesAddedFrame = [];
  var frameCount = 0;
  function makeNode(id, name, parentId, budgetGroupId) {
    var n = { id: id, name: name, parentId: parentId, budgetGroupId: budgetGroupId, children: [] };
    nodesById[id] = n;
    nodesAddedFrame[id] = frameCount;
    return n;
  }
  makeNode(rootNodeId, "Root", null, 0);

  // ---- Aggregates (sparse array indexed by unique node id) ----
  var agg = [];
  function aggFor(id) {
    var a = agg[id];
    if (!a) { a = { calls: 0, us: 0, maxUs: 0, frames: 0 }; agg[id] = a; }
    return a;
  }

  // ---- Per-frame storage budget ----
  var maxSamples = (opts.maxSamples && opts.maxSamples > 0) ? opts.maxSamples : 4000000;
  var allowSamples = opts.noSamples !== true;
  var storing = allowSamples;
  var overflow = false;
  var totalSamples = 0;
  var samples = [];

  var frameTicks = [];
  var frameTotals = [];
  var frameCalls = [];
  var addedNodesByFrame = [];
  // Byte offset of each frame's Token_StartFrame and of the byte just past its
  // Token_EndOfFrame. A [start,end] frame range maps to one contiguous
  // file.slice(frameStartOffsets[start], frameEndOffsets[end]).
  var frameStartOffsets = [];
  var frameEndOffsets = [];

  var anyTime = false;
  var anyCalls = false;

  // Outer variables reused by readTimings (avoids allocating a closure per frame)
  var curSamples = null;
  var frameTotalUs = 0;
  var frameTotalCalls = 0;

  function readTimings(nodeId) {
    var callsToken = u8();
    var calls;
    if (callsToken === 255) calls = u16(); else calls = callsToken;

    var timeUnits = u16();
    var us;
    if (timeUnits === 0xFFFF) us = u32() * 4; else us = timeUnits * 4;

    if (calls > 0) anyCalls = true;
    if (us > 0) anyTime = true;
    totalSamples++;

    if (storing) {
      curSamples.ids.push(nodeId);
      curSamples.calls.push(calls);
      curSamples.us.push(us);
      if (totalSamples > maxSamples) {
        // Too large to keep every frame; fall back to whole-recording aggregate.
        storing = false;
        overflow = true;
        samples.length = 0;
        curSamples = null;
      }
    }

    frameTotalUs += us;
    frameTotalCalls += calls;

    var a = aggFor(nodeId);
    a.calls += calls;
    a.us += us;
    if (us > a.maxUs) a.maxUs = us;
    a.frames++;

    var kids = nodesById[nodeId].children;
    for (var k = 0; k < kids.length; k++) readTimings(kids[k]);
  }

  var progressAt = 0;
  var totalFramesApprox = -1;

  while (pos < totalBytes) {
    var frameStart = pos;
    var token = u8();
    if (token === TOKEN_FILE_FINISHED) break;
    if (token !== TOKEN_START_FRAME) {
      throw new Error("Expected start-of-frame token at offset " + (pos - 1) + ", got " + token + ".");
    }
    var tick = i32();
    frameTicks.push(tick);

    frameTotalUs = 0;
    frameTotalCalls = 0;
    curSamples = storing ? { ids: [], calls: [], us: [] } : null;
    var added = [];

    while (true) {
      var inner = u8();
      if (inner === TOKEN_END_OF_FRAME) break;
      if (inner === TOKEN_ADD_BUDGET_GROUP) {
        var bgName = cstr();
        var bgFlags = i32();
        addBudgetGroup(bgName, bgFlags);
      } else if (inner === TOKEN_ADD_NODE) {
        var parentId = i32();
        var nodeName = cstr();
        var bgId = i32();
        var nodeId = i32();
        var parent = nodesById[parentId];
        if (!parent) throw new Error("AddNode references unknown parent " + parentId + " at offset " + (pos - 4) + ".");
        if (nodesById[nodeId]) throw new Error("AddNode re-declares node " + nodeId + " at offset " + (pos - 4) + ".");
        makeNode(nodeId, nodeName, parentId, bgId);
        parent.children.unshift(nodeId); // CVProfNode::GetSubNode() prepends
        added.push(nodeId);
      } else if (inner === TOKEN_TIMINGS) {
        readTimings(rootNodeId);
      } else {
        throw new Error("Unexpected token " + inner + " inside frame " + frameCount + " at offset " + (pos - 1) + ".");
      }
    }

    if (storing && curSamples) samples.push(curSamples);
    frameTotals.push(frameTotalUs);
    frameCalls.push(frameTotalCalls);
    addedNodesByFrame.push(added);
    frameStartOffsets.push(frameStart);
    frameEndOffsets.push(pos);
    frameCount++;

    if (frameCount - progressAt >= 500) {
      progressAt = frameCount;
      self.postMessage({ type: "progress", frames: frameCount, pos: pos, total: totalBytes });
    }
  }

  // ---- Compact and collect transferables ----
  var transfer = [];
  var frameTicksOut = Int32Array.from(frameTicks);
  var frameTotalsOut = Float64Array.from(frameTotals);
  var frameCallsOut = Uint32Array.from(frameCalls);
  var frameStartOffsetsOut = Float64Array.from(frameStartOffsets);
  var frameEndOffsetsOut = Float64Array.from(frameEndOffsets);
  transfer.push(frameTicksOut.buffer, frameTotalsOut.buffer, frameCallsOut.buffer,
                frameStartOffsetsOut.buffer, frameEndOffsetsOut.buffer);

  var addedOut = [];
  for (var f = 0; f < addedNodesByFrame.length; f++) {
    var arr = Int32Array.from(addedNodesByFrame[f]);
    transfer.push(arr.buffer);
    addedOut.push(arr);
  }

  var samplesOut = null;
  if (storing) {
    samplesOut = [];
    for (var s = 0; s < samples.length; s++) {
      var fr = samples[s];
      var ids = Int32Array.from(fr.ids);
      var callsArr = Uint32Array.from(fr.calls);
      var usArr = Float64Array.from(fr.us);
      transfer.push(ids.buffer, callsArr.buffer, usArr.buffer);
      samplesOut.push({ ids: ids, calls: callsArr, us: usArr });
    }
  }

  var t1 = (self.performance && self.performance.now) ? self.performance.now() : Date.now();

  // Keep the parsed tree around so later range queries can walk it.
  g_recording = {
    nodes: nodesById,
    nodesAddedFrame: nodesAddedFrame,
    rootNodeId: rootNodeId
  };

  return {
    result: {
      version: version,
      rootNodeId: rootNodeId,
      budgetGroups: budgetGroups,
      nodes: nodesById,
      aggregates: agg,
      frameCount: frameCount,
      frameTicks: frameTicksOut,
      frameTotals: frameTotalsOut,
      frameCalls: frameCallsOut,
      frameStartOffsets: frameStartOffsetsOut,
      frameEndOffsets: frameEndOffsetsOut,
      addedNodesByFrame: addedOut,
      samples: samplesOut,
      samplesStored: storing,
      samplesOverflow: overflow,
      totalSamples: totalSamples,
      anyTime: anyTime,
      anyCalls: anyCalls,
      parseMs: t1 - t0
    },
    transfer: transfer
  };
}

// Re-parse only the frames in a contiguous byte range and aggregate per node.
// `buffer` must start on the Token_StartFrame of `startFrame` and end just past
// the Token_EndOfFrame of `endFrame` (i.e. file.slice(frameStartOffsets[start],
// frameEndOffsets[end])).
function parseRange(buffer, startFrame, endFrame) {
  if (!g_recording) throw new Error("No recording loaded for a range query.");
  var rec = g_recording;
  var dv = new DataView(buffer);
  var totalBytes = buffer.byteLength;
  var pos = 0;
  var decoder = new TextDecoder("utf-8");

  function u8() { return dv.getUint8(pos++); }
  function u16() { var v = dv.getUint16(pos, true); pos += 2; return v; }
  function u32() { var v = dv.getUint32(pos, true); pos += 4; return v; }
  function i32() { var v = dv.getInt32(pos, true); pos += 4; return v; }
  function cstr() {
    var start = pos;
    while (dv.getUint8(pos) !== 0) pos++;
    var s = decoder.decode(new Uint8Array(buffer, start, pos - start));
    pos++;
    return s;
  }

  var agg = [];
  function aggFor(id) {
    var a = agg[id];
    if (!a) { a = { calls: 0, us: 0, maxUs: 0, frames: 0 }; agg[id] = a; }
    return a;
  }

  function readTimings(nodeId, frameIndex) {
    var callsToken = u8();
    var calls;
    if (callsToken === 255) calls = u16(); else calls = callsToken;

    var timeUnits = u16();
    var us;
    if (timeUnits === 0xFFFF) us = u32() * 4; else us = timeUnits * 4;

    var a = aggFor(nodeId);
    a.calls += calls;
    a.us += us;
    if (us > a.maxUs) a.maxUs = us;
    a.frames++;

    // Only descend into children that existed at this frame; the final child
    // order already reflects the prepend-only evolution of the tree.
    var kids = rec.nodes[nodeId].children;
    for (var k = 0; k < kids.length; k++) {
      if (rec.nodesAddedFrame[kids[k]] <= frameIndex) readTimings(kids[k], frameIndex);
    }
  }

  var frameIndex = startFrame;
  while (pos < totalBytes) {
    var token = u8();
    if (token === TOKEN_FILE_FINISHED) break;
    if (token !== TOKEN_START_FRAME) {
      throw new Error("Range parse: expected start-of-frame at offset " + (pos - 1) + ", got " + token + ".");
    }
    i32(); // tick
    while (true) {
      var inner = u8();
      if (inner === TOKEN_END_OF_FRAME) break;
      if (inner === TOKEN_ADD_BUDGET_GROUP) {
        cstr(); i32();
      } else if (inner === TOKEN_ADD_NODE) {
        i32(); cstr(); i32(); i32();
      } else if (inner === TOKEN_TIMINGS) {
        readTimings(rec.rootNodeId, frameIndex);
      } else {
        throw new Error("Range parse: unexpected token " + inner + " at offset " + (pos - 1) + ".");
      }
    }
    frameIndex++;
    if (frameIndex > endFrame + 1) break;
  }

  return agg;
}
</script>

<!-- ===================== UI ===================== -->
<script>
"use strict";

/* ------------------------------- helpers ------------------------------- */
function $(id) { return document.getElementById(id); }
function esc(s) {
  return String(s).replace(/[&<>"']/g, function (c) {
    return ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c];
  });
}
function fmtUs(us) {
  if (!us) return "0";
  var ms = us / 1000;
  if (Math.abs(ms) >= 1000) return (ms / 1000).toFixed(3) + " s";
  if (Math.abs(ms) >= 1) return ms.toFixed(3) + " ms";
  return us.toFixed(1) + " \u00b5s";
}
function fmtInt(n) {
  return (n === undefined || n === null) ? "0" : Number(n).toLocaleString();
}
function fmtBytes(n) {
  if (n < 1024) return n + " B";
  if (n < 1024 * 1024) return (n / 1024).toFixed(1) + " KiB";
  if (n < 1024 * 1024 * 1024) return (n / 1048576).toFixed(1) + " MiB";
  return (n / 1073741824).toFixed(2) + " GiB";
}
function flagsDecoded(flags) {
  var out = [];
  if (flags & 1) out.push("CLIENT");
  if (flags & 2) out.push("SERVER");
  if (flags & 4) out.push("OTHER");
  if (flags & 32768) out.push("HIDDEN");
  return out;
}

/* ------------------------------- state ------------------------------- */
var state = null;

/* ------------------------------- loading ------------------------------- */
var worker = null;
var lastFile = null;

function setError(msg) {
  var box = $("error-box");
  if (!msg) { box.classList.add("hidden"); box.textContent = ""; return; }
  box.classList.remove("hidden");
  box.textContent = msg;
}

function startParse(file, handle) {
  lastFile = file;
  if (handle) rememberHandle(handle);
  setError("");
  $("progress-wrap").classList.remove("hidden");
  $("progress-bar").style.width = "0%";
  $("status").textContent = "Reading " + file.name + " (" + fmtBytes(file.size) + ")...";

  file.arrayBuffer().then(function (buf) {
    if (worker) { worker.terminate(); worker = null; }
    var src = $("worker-src").textContent;
    var url = URL.createObjectURL(new Blob([src], { type: "text/javascript" }));
    worker = new Worker(url);
    worker.onmessage = onWorkerMessage;
    worker.onerror = function (e) {
      setError("Worker error: " + (e.message || "unknown"));
    };
    $("status").textContent = "Parsing...";
    worker.postMessage({ cmd: "parse", buffer: buf, opts: { maxSamples: 4000000 } }, [buf]);
  }).catch(function (err) {
    setError("Could not read file: " + err);
  });
}

function onWorkerMessage(e) {
  var msg = e.data;
  if (msg.type === "progress") {
    var pct = msg.total ? Math.floor(100 * msg.pos / msg.total) : 0;
    $("progress-bar").style.width = pct + "%";
    $("status").textContent = "Parsing... " + fmtInt(msg.frames) + " frames (" + pct + "%)";
  } else if (msg.type === "error") {
    setError("Parse error: " + msg.message);
    $("status").textContent = "Failed.";
  } else if (msg.type === "range") {
    var s = state;
    if (!s || msg.requestId !== s.requestId) return;
    s.agg = msg.aggregates;
    s.rangeCache.set(msg.startFrame + ":" + msg.endFrame, msg.aggregates);
    trimRangeCache(s.rangeCache);
    s.rangePending = false;
    renderAll();
    updateRangeStatus("Frames " + msg.startFrame + "\u2013" + msg.endFrame + " parsed in " + Math.round(msg.ms) + " ms");
  } else if (msg.type === "rangeError") {
    var s2 = state;
    if (!s2 || msg.requestId !== s2.requestId) return;
    s2.rangePending = false;
    renderAll();
    updateRangeStatus("Range parse failed: " + msg.message);
  } else if (msg.type === "done") {
    $("progress-bar").style.width = "100%";
    $("status").textContent = "Done.";
    $("progress-wrap").classList.add("hidden");
    buildState(msg.result, lastFile);
    renderAll();
  }
}

/* --------------------------- file system access --------------------------- */
// Persist the FileSystemFileHandle (when the browser supports the File System
// Access API) so a large recording can be reopened next time and its byte range
// re-read on demand for granular frame queries. Falls back silently to the
// plain <input type=file> File object, which is re-readable within a session.
var HANDLE_DB = "vprof-viewer";
var HANDLE_STORE = "handles";
var HANDLE_KEY = "last";

function idbOpen() {
  return new Promise(function (resolve, reject) {
    if (!window.indexedDB) return reject(new Error("IndexedDB unavailable"));
    var req = indexedDB.open(HANDLE_DB, 1);
    req.onupgradeneeded = function () {
      if (!req.result.objectStoreNames.contains(HANDLE_STORE)) req.result.createObjectStore(HANDLE_STORE);
    };
    req.onsuccess = function () { resolve(req.result); };
    req.onerror = function () { reject(req.error); };
  });
}
function idbSet(key, value) {
  return idbOpen().then(function (db) {
    return new Promise(function (resolve, reject) {
      var tx = db.transaction(HANDLE_STORE, "readwrite");
      tx.objectStore(HANDLE_STORE).put(value, key);
      tx.oncomplete = function () { resolve(); };
      tx.onerror = function () { reject(tx.error); };
    });
  });
}
function idbGet(key) {
  return idbOpen().then(function (db) {
    return new Promise(function (resolve, reject) {
      var req = db.transaction(HANDLE_STORE, "readonly").objectStore(HANDLE_STORE).get(key);
      req.onsuccess = function () { resolve(req.result); };
      req.onerror = function () { reject(req.error); };
    });
  });
}
function rememberHandle(handle) {
  if (!handle || !handle.getFile) return;
  handle.getFile().then(function (file) {
    idbSet(HANDLE_KEY, { handle: handle, name: file.name, size: file.size, lastModified: file.lastModified });
  }).catch(function () {});
}
function showReopenButton(entry) {
  var btn = $("reopen-last");
  btn.textContent = "Reopen " + entry.name;
  btn.classList.remove("hidden");
  btn.onclick = function () {
    var permission = entry.handle.queryPermission
      ? entry.handle.queryPermission({ mode: "read" })
      : Promise.resolve("granted");
    permission.then(function (status) {
      if (status !== "granted" && entry.handle.requestPermission) {
        return entry.handle.requestPermission({ mode: "read" });
      }
      return status;
    }).then(function (status) {
      if (status !== "granted") throw new Error("read permission denied");
      return entry.handle.getFile();
    }).then(function (file) {
      startParse(file, entry.handle);
    }).catch(function (err) {
      setError("Could not reopen recording: " + err);
    });
  };
}

/* ------------------------------- state build ------------------------------- */
function buildState(result, file) {
  var nodeById = result.nodes;
  var nodes = [];
  for (var i = 0; i < nodeById.length; i++) if (nodeById[i]) nodes.push(nodeById[i]);

  var groupName = Object.create(null);
  for (var g = 0; g < result.budgetGroups.length; g++) groupName[result.budgetGroups[g].id] = result.budgetGroups[g].name;

  // Collapse everything except the root unless the tree is small.
  var collapsed = new Set();
  for (var k = 0; k < nodes.length; k++) collapsed.add(nodes[k].id);
  collapsed.delete(result.rootNodeId);
  if (nodes.length <= 200) {
    // small tree: expand fully
    collapsed.clear();
  }

  state = {
    r: result,
    file: file,
    nodeById: nodeById,
    nodes: nodes,
    groupName: groupName,
    maxId: nodeById.length,
    frameCount: result.frameCount,
    rangeStart: 0,
    rangeEnd: Math.max(0, result.frameCount - 1),
    viewStart: 0,
    viewEnd: Math.max(0, result.frameCount - 1),
    metricTime: result.anyTime,
    sortKey: result.anyTime ? "total" : "name",
    sortDir: result.anyTime ? -1 : 1,
    collapsed: collapsed,
    filter: "",
    agg: result.aggregates,
    self: new Float64Array(nodeById.length),
    rootTotal: 0,
    percentBase: 1,
    rangeCache: new Map(),   // "start:end" -> aggregate (bounded)
    requestId: 0,            // newest outstanding range request
    rangePending: false
  };
  updateRangeInputs();
}

/* ------------------------------- aggregation ------------------------------- */
// Aggregate per-node timings from the per-frame samples retained for small
// captures.
function computeFromSamples(start, end) {
  var s = state;
  var agg = [];
  function get(id) {
    var a = agg[id];
    if (!a) { a = { calls: 0, us: 0, maxUs: 0, frames: 0 }; agg[id] = a; }
    return a;
  }
  var endClamped = Math.min(end, s.frameCount - 1);
  for (var f = Math.max(0, start); f <= endClamped; f++) {
    var fr = s.r.samples[f];
    if (!fr) continue;
    var ids = fr.ids, calls = fr.calls, us = fr.us;
    for (var i = 0; i < ids.length; i++) {
      var id = ids[i];
      var a = get(id);
      a.calls += calls[i];
      a.us += us[i];
      if (us[i] > a.maxUs) a.maxUs = us[i];
      a.frames++;
    }
  }
  return agg;
}

// Ranges can be served from retained samples or by re-parsing the original
// file's byte range on demand (the frame offset index makes that seekable).
function canQueryRanges() {
  var s = state;
  return !!(s && (s.r.samples || (s.file && s.r.frameStartOffsets && worker)));
}

function trimRangeCache(cache) {
  while (cache.size > 32) {
    var first = cache.keys().next().value;
    cache.delete(first);
  }
}

function updateRangeStatus(msg) {
  var el = $("range-status");
  if (el) el.textContent = msg || "";
}

// Compute state.agg for the current range: synchronously when cheap, otherwise
// ask the worker to parse just the selected byte span.
function refreshAggregate() {
  var s = state;
  var a = s.rangeStart, b = s.rangeEnd;

  if (a <= 0 && b >= s.frameCount - 1) {
    s.agg = s.r.aggregates;
    s.rangePending = false;
    renderAll();
    return;
  }

  var key = a + ":" + b;
  var cached = s.rangeCache.get(key);
  if (cached) {
    s.agg = cached;
    s.rangePending = false;
    renderAll();
    return;
  }

  if (s.r.samples) {
    s.agg = computeFromSamples(a, b);
    s.rangeCache.set(key, s.agg);
    trimRangeCache(s.rangeCache);
    s.rangePending = false;
    renderAll();
    return;
  }

  if (!s.file || !s.r.frameStartOffsets || !worker) {
    // No way to re-read the source; fall back to the whole-recording aggregate.
    s.agg = s.r.aggregates;
    s.rangePending = false;
    renderAll();
    return;
  }

  var requestId = ++s.requestId;
  s.rangePending = true;
  updateRangeStatus("Loading frames " + a + "\u2013" + b + "\u2026");
  drawTimeline();

  var startOff = s.r.frameStartOffsets[a];
  var endOff = s.r.frameEndOffsets[b];
  s.file.slice(startOff, endOff).arrayBuffer().then(function (buf) {
    if (!state || state.requestId !== requestId) return;
    worker.postMessage({ cmd: "query", buffer: buf, startFrame: a, endFrame: b, requestId: requestId }, [buf]);
  }).catch(function (err) {
    if (!state || state.requestId !== requestId) return;
    state.rangePending = false;
    updateRangeStatus("Range read failed: " + err);
    renderAll();
  });
}

function recompute() {
  var s = state;
  var agg = s.agg || s.r.aggregates;
  s.agg = agg;

  var self = new Float64Array(s.maxId);
  for (var id = 0; id < agg.length; id++) if (agg[id]) self[id] = agg[id].us;
  for (var id2 = 0; id2 < agg.length; id2++) {
    if (!agg[id2]) continue;
    var n = s.nodeById[id2];
    if (!n) continue;
    var kids = n.children;
    for (var c = 0; c < kids.length; c++) if (agg[kids[c]]) self[id2] -= agg[kids[c]].us;
  }
  s.self = self;

  var rootAgg = agg[s.r.rootNodeId];
  s.rootTotal = rootAgg ? rootAgg.us : 0;
  if (s.metricTime) {
    s.percentBase = s.rootTotal || 1;
  } else {
    s.percentBase = (rootAgg && rootAgg.calls) || 1;
  }
}

/* ------------------------------- rendering ------------------------------- */
function renderAll() {
  recompute();
  renderSummary();
  drawTimeline();
  renderTree();
  renderBudgets();
  renderTop();
  ["summary-section", "timeline-section", "tree-section", "budget-section", "top-section"]
    .forEach(function (id) { $(id).classList.remove("hidden"); });

  // Range scoping works with retained samples or by re-parsing the source file
  // on demand, so only disable it when neither is available.
  var rangeDisabled = !canQueryRanges();
  ["range-start", "range-end", "range-apply", "frame-prev", "frame-next"].forEach(function (id) {
    $(id).disabled = rangeDisabled;
  });
  if (!state.rangePending) updateRangeStatus("");
}

function renderSummary() {
  var s = state, r = s.r;

  var notices = $("notices");
  notices.innerHTML = "";
  if (!r.anyTime) {
    var d = document.createElement("div");
    d.className = "warn";
    d.innerHTML = "<strong>No timing data in this recording.</strong> Every sampled " +
      "microsecond value is zero, so time/self/percentage columns are not meaningful. " +
      "This is common for captures made by the engine's snapshot path, which clears the " +
      "current frame's counters before writing them. The call tree, call counts and " +
      "structure below are still shown.";
    notices.appendChild(d);
  }
  if (r.samplesOverflow) {
    var d2 = document.createElement("div");
    d2.className = "notice";
    d2.textContent = "This recording is very large (" + fmtInt(r.totalSamples) +
      " samples), so per-frame samples were not kept in memory. Frame ranges are " +
      "still available: the viewer re-parses only the selected byte range from the " +
      "source file on demand.";
    notices.appendChild(d2);
  }

  var rows = [
    ["File", s.file ? s.file.name : "(unknown)"],
    ["Size", s.file ? fmtBytes(s.file.size) : "-"],
    ["Format version", r.version],
    ["Frames", fmtInt(r.frameCount)],
    ["Range", s.rangeStart + "\u2013" + s.rangeEnd + " (" + fmtInt(s.rangeEnd - s.rangeStart + 1) + " frames)"],
    ["Nodes", fmtInt(s.nodes.length)],
    ["Budget groups", fmtInt(r.budgetGroups.length)],
    ["Samples", fmtInt(r.totalSamples)],
    ["Total time", fmtUs(Math.round(s.rootTotal))],
    ["Parse time", Math.round(r.parseMs) + " ms"]
  ];
  $("summary").innerHTML = rows.map(function (row) {
    return '<div><div class="k">' + esc(row[0]) + '</div><div class="v">' + esc(row[1]) + "</div></div>";
  }).join("");
}

/* ---- timeline ---- */
var drag = null;

function useCallsForTimeline() {
  return !state.r.anyTime;
}
function timelineData() {
  return useCallsForTimeline() ? state.r.frameCalls : state.r.frameTotals;
}
function frameAt(clientX) {
  var s = state;
  var c = $("timeline");
  var rect = c.getBoundingClientRect();
  if (!rect.width) return s.viewStart;
  var x = clientX - rect.left;
  var count = s.viewEnd - s.viewStart + 1;
  var f = s.viewStart + Math.floor((x / rect.width) * count);
  if (f < s.viewStart) f = s.viewStart;
  if (f > s.viewEnd) f = s.viewEnd;
  if (f < 0) f = 0;
  if (f > s.frameCount - 1) f = s.frameCount - 1;
  return f;
}
function drawTimeline() {
  var c = $("timeline");
  var wrap = c.parentElement;
  var w = wrap.clientWidth || 600;
  var h = 120;
  var dpr = window.devicePixelRatio || 1;
  c.width = Math.round(w * dpr);
  c.height = Math.round(h * dpr);
  c.style.width = w + "px";
  c.style.height = h + "px";
  var ctx = c.getContext("2d");
  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
  ctx.clearRect(0, 0, w, h);

  var s = state;
  var data = timelineData();
  var viewStart = s.viewStart, viewEnd = s.viewEnd;
  var viewCount = Math.max(1, viewEnd - viewStart + 1);
  var max = 0;
  for (var i = viewStart; i <= viewEnd; i++) if (data[i] > max) max = data[i];

  var selA = s.rangeStart, selB = s.rangeEnd;
  if (drag && drag.active) {
    selA = Math.min(drag.start, drag.end);
    selB = Math.max(drag.start, drag.end);
  }

  var padTop = 4, padBottom = 16;
  var plotH = h - padTop - padBottom;
  var bw = w / viewCount;

  for (var f = viewStart; f <= viewEnd; f++) {
    var v = data[f] || 0;
    var bh = max ? (v / max) * plotH : 0;
    var x = (f - viewStart) * bw;
    var inSel = (f >= selA && f <= selB);
    ctx.fillStyle = inSel ? "#2b6cb0" : "#b9c6d6";
    ctx.fillRect(x, padTop + plotH - bh, Math.max(1, bw - 0.25), bh);
  }

  // selection edges (only when they fall inside the current view)
  ctx.strokeStyle = "#e0a800";
  ctx.lineWidth = 1;
  if (selA > viewStart) { var xa = (selA - viewStart) * bw; ctx.beginPath(); ctx.moveTo(xa, padTop); ctx.lineTo(xa, padTop + plotH); ctx.stroke(); }
  if (selB < viewEnd) { var xb = (selB - viewStart + 1) * bw; ctx.beginPath(); ctx.moveTo(xb, padTop); ctx.lineTo(xb, padTop + plotH); ctx.stroke(); }

  ctx.fillStyle = "#333";
  ctx.font = "11px system-ui, sans-serif";
  var unit = useCallsForTimeline() ? "calls" : "time";
  ctx.fillText("max " + (useCallsForTimeline() ? fmtInt(max) : fmtUs(max)) + " per frame (" + unit + ")", 4, 11);
  var firstLabel = "frame " + viewStart;
  ctx.fillText(firstLabel, 4, h - 5);
  var lastLabel = "frame " + viewEnd;
  ctx.fillText(lastLabel, Math.max(4, w - ctx.measureText(lastLabel).width - 4), h - 5);

  var hint = useCallsForTimeline()
    ? "Showing per-frame total call counts (no timing data available)."
    : "Showing per-frame total microseconds.";
  hint += " Drag to select a range, scroll to zoom, shift+drag to pan.";
  $("timeline-caption").textContent = hint;
  $("frame-label").textContent = "selected frames " + selA + "-" + selB;
  updateZoomLabel();
}

/* ---- timeline zoom / pan ---- */
// setView clamps a requested frame window to the recording and stores it.
function setView(start, end) {
  var s = state;
  var total = s.frameCount;
  if (total < 1) { s.viewStart = 0; s.viewEnd = 0; return; }
  var count = end - start + 1;
  if (count > total) count = total;
  if (count < 1) count = 1;
  if (start < 0) start = 0;
  if (start + count - 1 > total - 1) start = total - count;
  s.viewStart = start;
  s.viewEnd = start + count - 1;
}

// factor > 1 zooms in (fewer visible frames); centerFrame keeps the frame
// under the cursor fixed when given.
function zoomView(factor, centerFrame) {
  var s = state;
  var count = s.viewEnd - s.viewStart + 1;
  var newCount = Math.round(count / factor);
  if (newCount < 1) newCount = 1;
  if (newCount > s.frameCount) newCount = s.frameCount;
  if (newCount === count) return;
  var anchor = (typeof centerFrame === "number") ? centerFrame : (s.viewStart + s.viewEnd) / 2;
  var rel = count > 1 ? (anchor - s.viewStart) / (count - 1) : 0.5;
  var newStart = Math.round(anchor - rel * (newCount - 1));
  setView(newStart, newStart + newCount - 1);
  drawTimeline();
}

function panView(deltaFrames) {
  var s = state;
  var count = s.viewEnd - s.viewStart + 1;
  if (count >= s.frameCount) return;
  setView(s.viewStart + deltaFrames, s.viewEnd + deltaFrames);
  drawTimeline();
}

// If a selection moves completely outside the current view, scroll to it.
function revealSelection(a, b) {
  var s = state;
  if (b >= s.viewStart && a <= s.viewEnd) return;
  var count = s.viewEnd - s.viewStart + 1;
  var start = a;
  if (start + count - 1 > s.frameCount - 1) start = s.frameCount - count;
  setView(start, start + count - 1);
}

function updateZoomLabel() {
  var el = $("zoom-label");
  if (!el || !state) return;
  var s = state;
  var full = s.viewStart <= 0 && s.viewEnd >= s.frameCount - 1;
  el.textContent = full
    ? ""
    : "viewing frames " + s.viewStart + "\u2013" + s.viewEnd + " of " + fmtInt(s.frameCount);
}
function applyRange(a, b) {
  var s = state;
  a = Math.max(0, Math.min(a, s.frameCount - 1));
  b = Math.max(0, Math.min(b, s.frameCount - 1));
  if (a > b) { var t = a; a = b; b = t; }
  s.rangeStart = a; s.rangeEnd = b;
  updateRangeInputs();
  revealSelection(a, b);
  refreshAggregate();
}
function updateRangeInputs() {
  $("range-start").value = state.rangeStart;
  $("range-end").value = state.rangeEnd;
}

/* ---- tree ---- */
function compareIds(aId, bId) {
  var s = state;
  if (s.sortKey === "name") {
    return s.nodeById[aId].name.localeCompare(s.nodeById[bId].name) * s.sortDir;
  }
  var a = s.agg[aId] || { calls: 0, us: 0, maxUs: 0, frames: 0 };
  var b = s.agg[bId] || { calls: 0, us: 0, maxUs: 0, frames: 0 };
  var av, bv;
  switch (s.sortKey) {
    case "calls": av = a.calls; bv = b.calls; break;
    case "self": av = s.self[aId] || 0; bv = s.self[bId] || 0; break;
    case "avg": av = a.frames ? a.us / a.frames : 0; bv = b.frames ? b.us / b.frames : 0; break;
    case "max": av = a.maxUs; bv = b.maxUs; break;
    default: av = a.us; bv = b.us;
  }
  if (av === bv) return s.nodeById[aId].name.localeCompare(s.nodeById[bId].name);
  return (av < bv ? -1 : 1) * s.sortDir;
}
function computeMatchSet(text) {
  if (!text) return null;
  var s = state;
  var t = text.toLowerCase();
  var set = new Set();
  for (var i = 0; i < s.nodes.length; i++) {
    var n = s.nodes[i];
    if (n.name.toLowerCase().indexOf(t) !== -1) {
      set.add(n.id);
      var p = n.parentId;
      while (p !== null && p !== undefined) { set.add(p); p = s.nodeById[p].parentId; }
    }
  }
  return set;
}
function renderTree() {
  var s = state;
  var matchSet = computeMatchSet(s.filter);
  var orderCache = Object.create(null);
  function order(id) {
    var c = orderCache[id];
    if (c) return c;
    c = s.nodeById[id].children.slice();
    c.sort(compareIds);
    orderCache[id] = c;
    return c;
  }

  var rows = [];
  function visit(id, depth) {
    var n = s.nodeById[id];
    if (!n) return;
    if (matchSet && !matchSet.has(id)) return;
    var a = s.agg[id] || { calls: 0, us: 0, maxUs: 0, frames: 0 };
    var totalUs = a.us;
    var selfUs = s.self[id] || 0;
    var pct = s.percentBase ? ((s.metricTime ? totalUs : a.calls) / s.percentBase) * 100 : 0;
    rows.push({ id: id, depth: depth, n: n, a: a, totalUs: totalUs, selfUs: selfUs, pct: pct });
    var collapsed = !matchSet && s.collapsed.has(id);
    if (!collapsed) { order(id).forEach(function (c) { visit(c, depth + 1); }); }
  }
  visit(s.r.rootNodeId, 0);

  // Header
  var cols = [
    { key: "name", label: "Scope", num: false },
    { key: "calls", label: "Calls", num: true },
    { key: "total", label: "Total", num: true },
    { key: "self", label: "Self", num: true },
    { key: "avg", label: "Avg", num: true },
    { key: "max", label: "Max", num: true },
    { key: "_pct", label: "%", num: true }
  ];
  $("tree-head").innerHTML = cols.map(function (c) {
    var sortable = c.key !== "_pct";
    var marker = "";
    if (sortable && s.sortKey === c.key) marker = s.sortDir < 0 ? " \u25bc" : " \u25b2";
    return '<th class="' + (sortable ? "" : "nosort") + (c.num ? " num" : "") +
      '" data-key="' + (sortable ? c.key : "") + '">' + esc(c.label) + marker + "</th>";
  }).join("");
  Array.prototype.forEach.call($("tree-head").children, function (th) {
    var key = th.getAttribute("data-key");
    if (!key) return;
    th.onclick = function () {
      if (state.sortKey === key) state.sortDir = -state.sortDir;
      else { state.sortKey = key; state.sortDir = key === "name" ? 1 : -1; }
      renderTree();
    };
  });

  var maxMetric = 0;
  rows.forEach(function (r) { maxMetric = Math.max(maxMetric, s.metricTime ? r.totalUs : r.a.calls); });

  var html = rows.map(function (r) {
    var hasKids = r.n.children.length > 0;
    var collapsed = !matchSet && s.collapsed.has(r.id);
    var toggle = hasKids ? (collapsed ? "\u25b6" : "\u25bc") : "\u00a0";
    var indent = "padding-left:" + (4 + r.depth * 14) + "px";
    var metric = s.metricTime ? r.totalUs : r.a.calls;
    var barW = maxMetric ? Math.round(60 * metric / maxMetric) : 0;
    var avg = r.a.frames ? r.a.us / r.a.frames : 0;
    var groupName = s.groupName[r.n.budgetGroupId] || ("group " + r.n.budgetGroupId);
    return '<tr data-id="' + r.id + '">' +
      '<td class="tree-name" style="' + indent + '"><span class="toggle">' + toggle + "</span>" +
      esc(r.n.name) + ' <span class="muted">[' + esc(groupName) + "]</span>" +
      '<div class="bar" style="width:' + barW + 'px"></div></td>' +
      '<td class="num">' + fmtInt(r.a.calls) + "</td>" +
      '<td class="num">' + (s.metricTime ? fmtUs(r.totalUs) : "-") + "</td>" +
      '<td class="num">' + (s.metricTime ? fmtUs(r.selfUs) : "-") + "</td>" +
      '<td class="num">' + (s.metricTime && r.a.frames ? fmtUs(avg) : "-") + "</td>" +
      '<td class="num">' + (s.metricTime ? fmtUs(r.a.maxUs) : "-") + "</td>" +
      '<td class="num">' + (s.metricTime ? r.pct.toFixed(2) + "%" : "-") + "</td>" +
      "</tr>";
  }).join("");
  $("tree-body").innerHTML = html;
  $("tree-count").textContent = rows.length + " rows shown";

  Array.prototype.forEach.call($("tree-body").querySelectorAll("tr"), function (tr) {
    tr.onclick = function (ev) {
      var id = Number(tr.getAttribute("data-id"));
      var n = s.nodeById[id];
      if (!n || !n.children.length) return;
      if (s.collapsed.has(id)) s.collapsed.delete(id); else s.collapsed.add(id);
      renderTree();
    };
  });
}

/* ---- budget groups ---- */
function renderBudgets() {
  var s = state;
  var perGroup = Object.create(null);
  for (var id = 0; id < s.agg.length; id++) {
    var a = s.agg[id];
    if (!a) continue;
    var n = s.nodeById[id];
    if (!n) continue;
    var gid = n.budgetGroupId;
    var e = perGroup[gid];
    if (!e) e = perGroup[gid] = { us: 0, calls: 0 };
    e.us += a.us; e.calls += a.calls;
  }
  var rows = [];
  for (var gi = 0; gi < s.r.budgetGroups.length; gi++) {
    var g = s.r.budgetGroups[gi];
    var e2 = perGroup[g.id];
    if (!e2 && !g.isDefault) continue;
    rows.push({ id: g.id, name: g.name, us: e2 ? e2.us : 0, calls: e2 ? e2.calls : 0 });
  }
  var metric = s.metricTime ? "us" : "calls";
  rows.sort(function (a, b) { return b[metric] - a[metric]; });

  $("budget-body").innerHTML = rows.map(function (r) {
    var pct = s.percentBase ? (r[metric] / s.percentBase) * 100 : 0;
    return "<tr><td>" + esc(r.name) + "</td><td class='num'>" + fmtInt(r.calls) + "</td>" +
      "<td class='num'>" + (s.metricTime ? fmtUs(r.us) : "-") + "</td>" +
      "<td class='num'>" + (s.metricTime ? pct.toFixed(2) + "%" : "-") + "</td></tr>";
  }).join("");
}

/* ---- top nodes ---- */
function renderTop() {
  var s = state;
  var rows = [];
  for (var id = 0; id < s.agg.length; id++) {
    var a = s.agg[id];
    if (!a) continue;
    var n = s.nodeById[id];
    if (!n) continue;
    rows.push({ id: id, name: n.name, us: a.us, self: s.self[id] || 0, calls: a.calls });
  }
  if (s.metricTime) rows.sort(function (a, b) { return b.us - a.us; });
  else rows.sort(function (a, b) { return b.calls - a.calls; });
  rows = rows.slice(0, 100);

  $("top-body").innerHTML = rows.map(function (r) {
    return "<tr><td>" + esc(r.name) + "</td>" +
      "<td class='num'>" + (s.metricTime ? fmtUs(r.us) : "-") + "</td>" +
      "<td class='num'>" + (s.metricTime ? fmtUs(r.self) : "-") + "</td>" +
      "<td class='num'>" + fmtInt(r.calls) + "</td></tr>";
  }).join("");
}

/* ------------------------------- events ------------------------------- */
$("file").addEventListener("change", function (e) {
  var f = e.target.files && e.target.files[0];
  if (f) startParse(f);
});
document.addEventListener("dragover", function (e) { e.preventDefault(); });
document.addEventListener("drop", function (e) {
  e.preventDefault();
  var f = e.dataTransfer && e.dataTransfer.files && e.dataTransfer.files[0];
  if (f) startParse(f);
});

// File System Access API: use it when available so the source handle can be
// persisted and reused for on-demand range reads.
(function initFileSystemAccess() {
  if (window.showOpenFilePicker) {
    var picker = $("open-picker");
    picker.classList.remove("hidden");
    picker.onclick = function () {
      window.showOpenFilePicker({
        multiple: false,
        types: [{ description: "VProf recording", accept: { "application/octet-stream": [".vprof"] } }]
      }).then(function (handles) {
        return handles[0].getFile().then(function (file) { startParse(file, handles[0]); });
      }).catch(function (err) {
        if (err && err.name === "AbortError") return;
        setError("Could not open file: " + err);
      });
    };
  }
  idbGet(HANDLE_KEY).then(function (entry) {
    if (entry && entry.handle) showReopenButton(entry);
  }).catch(function () {});
})();

$("range-all").onclick = function () { applyRange(0, state.frameCount - 1); };
$("range-apply").onclick = function () {
  applyRange(Number($("range-start").value), Number($("range-end").value));
};
$("frame-prev").onclick = function () {
  var f = Math.max(0, state.rangeStart - 1); applyRange(f, f);
};
$("frame-next").onclick = function () {
  var f = Math.min(state.frameCount - 1, state.rangeEnd + 1); applyRange(f, f);
};
$("expand-all").onclick = function () { state.collapsed.clear(); renderTree(); };
$("collapse-all").onclick = function () {
  state.collapsed.clear();
  for (var i = 0; i < state.nodes.length; i++) state.collapsed.add(state.nodes[i].id);
  state.collapsed.delete(state.r.rootNodeId);
  renderTree();
};
var filterTimer = null;
$("filter").addEventListener("input", function (e) {
  clearTimeout(filterTimer);
  filterTimer = setTimeout(function () { state.filter = e.target.value.trim(); renderTree(); }, 120);
});

/* timeline interaction: drag selects, shift+drag pans, wheel zooms */
(function () {
  var c = $("timeline");
  var pan = null;

  c.addEventListener("mousedown", function (e) {
    if (!state) return;
    e.preventDefault();
    if (e.shiftKey) {
      pan = { startX: e.clientX, startView: state.viewStart, count: state.viewEnd - state.viewStart + 1 };
      return;
    }
    if (!canQueryRanges()) return;
    drag = { active: true, start: frameAt(e.clientX), end: frameAt(e.clientX) };
    drawTimeline();
  });
  window.addEventListener("mousemove", function (e) {
    if (pan) {
      var rect = c.getBoundingClientRect();
      if (!rect.width) return;
      var delta = Math.round((e.clientX - pan.startX) / rect.width * pan.count);
      setView(pan.startView - delta, pan.startView - delta + pan.count - 1);
      drawTimeline();
      return;
    }
    if (!drag || !drag.active) return;
    drag.end = frameAt(e.clientX);
    drawTimeline();
  });
  window.addEventListener("mouseup", function (e) {
    if (pan) { pan = null; return; }
    if (!drag || !drag.active) return;
    drag.end = frameAt(e.clientX);
    var a = drag.start, b = drag.end;
    drag = null;
    applyRange(a, b);
  });
  c.addEventListener("wheel", function (e) {
    if (!state) return;
    e.preventDefault();
    if (e.shiftKey) {
      var count = state.viewEnd - state.viewStart + 1;
      var rect = c.getBoundingClientRect();
      var step = Math.max(1, Math.round(((e.deltaY || e.deltaX) / (rect.height || 1)) * count));
      panView(e.deltaY > 0 ? step : -step);
      return;
    }
    zoomView(e.deltaY < 0 ? 1.3 : 1 / 1.3, frameAt(e.clientX));
  }, { passive: false });
  window.addEventListener("resize", function () { if (state) drawTimeline(); });
})();

$("zoom-in").onclick = function () { if (state) zoomView(1.5); };
$("zoom-out").onclick = function () { if (state) zoomView(1 / 1.5); };
$("zoom-selection").onclick = function () {
  if (!state) return;
  setView(state.rangeStart, state.rangeEnd);
  drawTimeline();
};
$("zoom-reset").onclick = function () {
  if (!state) return;
  setView(0, state.frameCount - 1);
  drawTimeline();
};
</script>
</body>
</html>