nestjs-profiler 1.0.24 → 1.0.26

package/views/events.html

@@ -0,0 +1,763 @@
+<style>
+  /* Tree connector lines */
+  .ev-children { margin-left: 1.5rem; border-left: 2px solid #e2e8f0; padding-left: 0; }
+  .ev-branch   { position: relative; }
+  .ev-branch::before {
+    content: '';
+    position: absolute;
+    left: -1rem; top: 1.1rem;
+    width: 1rem;
+    border-top: 2px solid #e2e8f0;
+  }
+  /* Copy button */
+  .ev-copy-btn {
+    display: inline-flex; align-items: center; justify-content: center;
+    width: 26px; height: 26px; border-radius: 6px;
+    border: 1px solid transparent;
+    color: #9ca3af; cursor: pointer; background: transparent;
+    transition: color .15s, background .15s, border-color .15s;
+    flex-shrink: 0;
+  }
+  .ev-copy-btn:hover { color: #4f46e5; background: #eef2ff; border-color: #c7d2fe; }
+  .ev-copy-btn.copied { color: #16a34a; background: #f0fdf4; border-color: #bbf7d0; }
+</style>
+
+<div id="evRoot">
+
+  <!-- Header -->
+  <div class="mb-6 flex items-start justify-between">
+    <div>
+      <h1 class="text-2xl font-bold text-gray-900">Event Tracking</h1>
+      <p class="mt-1 text-sm text-gray-500">Captured <code class="bg-gray-100 px-1 py-0.5 rounded text-xs">EventEmitter2</code> emissions with listener timing and cascading chains.</p>
+    </div>
+    <div class="flex items-center gap-2 ml-4 mt-1">
+      <div id="evFilterWrap" class="hidden flex items-center gap-2">
+        <input id="evFilter" type="text" placeholder="Search event…"
+          class="border border-gray-300 rounded-md px-3 py-1.5 text-sm text-gray-700 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 w-44"
+          oninput="renderFilteredEvents()" />
+        <select id="evStatusFilter" onchange="renderFilteredEvents()"
+          class="border border-gray-300 rounded-md px-2 py-1.5 text-sm text-gray-700 focus:outline-none focus:ring-2 focus:ring-indigo-500">
+          <option value="">All</option>
+          <option value="success">Success</option>
+          <option value="error">Error</option>
+        </select>
+      </div>
+      <button id="evAutoBtn" onclick="toggleAuto()"
+        class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium border border-gray-300 bg-white text-gray-700 rounded-md hover:bg-gray-50 transition-colors">
+        <span id="evAutoDot" class="w-2 h-2 rounded-full bg-gray-300"></span>
+        Auto
+      </button>
+      <button onclick="loadEvents(true)"
+        class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium bg-indigo-600 hover:bg-indigo-700 text-white rounded-md transition-colors">
+        <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+            d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
+        </svg>
+        Refresh
+      </button>
+    </div>
+  </div>
+
+  <!-- Stats strip -->
+  <div id="evStats" class="hidden grid grid-cols-4 gap-4 mb-6">
+    <div class="bg-white rounded-xl border border-gray-200 shadow-sm p-4">
+      <p class="text-xs font-medium text-gray-500 uppercase tracking-wide">Total Events</p>
+      <p id="statTotal" class="mt-1 text-3xl font-bold text-gray-900">—</p>
+    </div>
+    <div class="bg-white rounded-xl border border-gray-200 shadow-sm p-4">
+      <p class="text-xs font-medium text-gray-500 uppercase tracking-wide">Root Chains</p>
+      <p id="statRoot" class="mt-1 text-3xl font-bold text-gray-900">—</p>
+    </div>
+    <div class="bg-white rounded-xl border border-gray-200 shadow-sm p-4">
+      <p class="text-xs font-medium text-gray-500 uppercase tracking-wide">Errors</p>
+      <p id="statErrors" class="mt-1 text-3xl font-bold text-red-600">—</p>
+    </div>
+    <div class="bg-white rounded-xl border border-gray-200 shadow-sm p-4">
+      <p class="text-xs font-medium text-gray-500 uppercase tracking-wide">Avg Duration</p>
+      <p id="statAvg" class="mt-1 text-3xl font-bold text-gray-900">—</p>
+    </div>
+  </div>
+
+  <!-- Idle -->
+  <div id="evIdle" class="bg-white rounded-xl border border-gray-200 shadow-sm p-10">
+    <div class="max-w-md mx-auto text-center">
+      <div class="flex justify-center mb-5">
+        <div class="w-14 h-14 rounded-full bg-indigo-50 flex items-center justify-center">
+          <svg class="w-7 h-7 text-indigo-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+              d="M3 18v-6a9 9 0 0 1 18 0v6M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z"/>
+          </svg>
+        </div>
+      </div>
+      <h2 class="text-lg font-semibold text-gray-800 mb-1">No events captured yet</h2>
+      <p class="text-sm text-gray-500 mb-6">Events fired via <code class="bg-gray-100 px-1 rounded">EventEmitter2</code> will appear here automatically.</p>
+      <button onclick="loadEvents(true)"
+        class="px-4 py-2 text-sm font-medium rounded-lg bg-indigo-600 hover:bg-indigo-700 text-white transition-colors">
+        Check for events
+      </button>
+    </div>
+  </div>
+
+  <!-- Loading -->
+  <div id="evLoading" class="hidden bg-white rounded-xl border border-gray-200 shadow-sm p-10">
+    <div class="max-w-md mx-auto text-center">
+      <div class="flex justify-center mb-5">
+        <div class="w-14 h-14 rounded-full bg-indigo-50 flex items-center justify-center">
+          <svg class="w-7 h-7 text-indigo-500 animate-spin" fill="none" viewBox="0 0 24 24">
+            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+          </svg>
+        </div>
+      </div>
+      <h2 class="text-lg font-semibold text-gray-800">Loading events…</h2>
+    </div>
+  </div>
+
+  <!-- Error -->
+  <div id="evError" class="hidden bg-red-50 border border-red-200 rounded-xl p-8 text-center">
+    <svg class="w-10 h-10 text-red-400 mx-auto mb-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+    </svg>
+    <p class="text-red-700 font-semibold mb-1">Failed to load events</p>
+    <p id="evErrorMsg" class="text-red-500 text-sm mb-4"></p>
+    <button onclick="loadEvents(true)" class="px-4 py-2 text-sm font-medium rounded-lg bg-red-100 hover:bg-red-200 text-red-700">Try again</button>
+  </div>
+
+  <!-- Results -->
+  <div id="evResults" class="hidden">
+    <div id="evTreeContainer" class="space-y-4"></div>
+  </div>
+
+</div>
+
+<!-- ── Flow Modal ─────────────────────────────────────────────────────────── -->
+<div id="evFlowModal" class="hidden fixed inset-0 z-50 flex items-center justify-center p-4">
+  <!-- Backdrop -->
+  <div class="absolute inset-0 bg-black/50 backdrop-blur-sm" onclick="closeFlowModal()"></div>
+  <!-- Panel -->
+  <div class="relative bg-white rounded-2xl shadow-2xl w-full max-w-5xl max-h-[88vh] flex flex-col">
+    <!-- Modal header -->
+    <div class="flex items-center justify-between px-6 py-4 border-b border-gray-200 flex-shrink-0">
+      <div class="flex items-center gap-3">
+        <div class="w-8 h-8 bg-indigo-100 rounded-lg flex items-center justify-center flex-shrink-0">
+          <svg class="w-4 h-4 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+              d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2"/>
+          </svg>
+        </div>
+        <h2 id="evFlowTitle" class="text-base font-semibold text-gray-900">Event Flow</h2>
+      </div>
+      <div class="flex items-center gap-1">
+        <!-- Expand / Shrink toggle -->
+        <button id="evFlowExpandBtn" onclick="toggleFlowExpand()"
+          class="p-1.5 rounded-lg text-gray-400 hover:text-gray-700 hover:bg-gray-100 transition-colors"
+          title="Expand to full screen">
+          <!-- Expand icon (shown when normal) -->
+          <svg id="evFlowExpandIcon" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+              d="M4 8V4m0 0h4M4 4l5 5m11-5h-4m4 0v4m0-4l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"/>
+          </svg>
+          <!-- Shrink icon (shown when expanded) -->
+          <svg id="evFlowShrinkIcon" class="w-5 h-5 hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+              d="M8 3v3a2 2 0 01-2 2H3m18 0h-3a2 2 0 01-2-2V3m0 18v-3a2 2 0 012-2h3M3 16h3a2 2 0 012 2v3"/>
+          </svg>
+        </button>
+        <button onclick="closeFlowModal()"
+          class="p-1.5 rounded-lg text-gray-400 hover:text-gray-700 hover:bg-gray-100 transition-colors"
+          title="Close">
+          <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
+          </svg>
+        </button>
+      </div>
+    </div>
+    <!-- Modal content -->
+    <div id="evFlowContent" class="flex-1 overflow-auto p-6 min-h-0 bg-gray-50"></div>
+  </div>
+</div>
+
+<script>
+(function () {
+  let allEvents = [];
+  let autoTimer = null;
+  let autoEnabled = false;
+  if (!window.__evCache)  window.__evCache  = null;
+  if (!window.__evAbort)  window.__evAbort  = null;
+
+  // ── State helpers ──────────────────────────────────────────────────────────
+  function setState(s) {
+    ['evIdle','evLoading','evError','evResults'].forEach(id => {
+      const el = document.getElementById(id);
+      if (el) el.classList.toggle('hidden', id !== s);
+    });
+    const stats = document.getElementById('evStats');
+    if (stats) stats.classList.toggle('hidden', s !== 'evResults');
+    const fw = document.getElementById('evFilterWrap');
+    if (fw) fw.classList.toggle('hidden', s !== 'evResults');
+  }
+
+  // ── Data loading ───────────────────────────────────────────────────────────
+  async function loadEvents(force) {
+    if (!force && window.__evCache) { allEvents = window.__evCache; return renderAll(); }
+    if (window.__evAbort) window.__evAbort.abort();
+    window.__evAbort = new AbortController();
+    setState('evLoading');
+    try {
+      const res = await fetch('/__profiler/api/events', { signal: window.__evAbort.signal });
+      if (!res.ok) throw new Error('HTTP ' + res.status);
+      allEvents = await res.json();
+      window.__evCache = allEvents;
+      renderAll();
+    } catch(e) {
+      if (e.name === 'AbortError') return;
+      document.getElementById('evErrorMsg').textContent = e.message;
+      setState('evError');
+    }
+  }
+
+  function renderAll() {
+    updateStats(allEvents);
+    renderFilteredEvents();
+  }
+
+  function renderFilteredEvents() {
+    const filter = (document.getElementById('evFilter')?.value || '').toLowerCase();
+    const statusFilter = document.getElementById('evStatusFilter')?.value || '';
+    const byId = {};
+    allEvents.forEach(e => byId[e.id] = e);
+    let roots = allEvents.filter(e => !e.parentEventId);
+    if (roots.length === 0 && allEvents.length === 0) return setState('evIdle');
+    if (filter || statusFilter) {
+      const matches = allEvents.filter(e =>
+        (!filter || e.eventName.toLowerCase().includes(filter)) &&
+        (!statusFilter || e.status === statusFilter)
+      );
+      if (matches.length === 0) { renderEmpty('No events match your filter.'); return; }
+      renderList(matches, byId);
+      return;
+    }
+    if (roots.length === 0) return setState('evIdle');
+    roots.sort((a, b) => b.emittedAt - a.emittedAt);
+    const container = document.getElementById('evTreeContainer');
+    container.innerHTML = '';
+    roots.forEach(root => container.appendChild(buildTree(root, byId)));
+    setState('evResults');
+  }
+
+  function renderEmpty(msg) {
+    const c = document.getElementById('evTreeContainer');
+    c.innerHTML = `<div class="bg-white rounded-xl border border-gray-200 p-8 text-center text-gray-500 text-sm">${msg}</div>`;
+    setState('evResults');
+  }
+
+  function renderList(events, byId) {
+    const c = document.getElementById('evTreeContainer');
+    c.innerHTML = '';
+    events.sort((a, b) => b.emittedAt - a.emittedAt);
+    events.forEach(e => c.appendChild(buildEventCard(e, byId)));
+    setState('evResults');
+  }
+
+  // ── Tree builder ───────────────────────────────────────────────────────────
+  function buildTree(ev, byId) {
+    const wrap = document.createElement('div');
+    const card = buildEventCard(ev, byId);
+    wrap.appendChild(card);
+
+    if (ev.childEventIds && ev.childEventIds.length > 0) {
+      const children = document.createElement('div');
+      children.className = 'ev-children mt-2';
+      ev.childEventIds.forEach(childId => {
+        const child = byId[childId];
+        if (!child) return;
+        const branch = document.createElement('div');
+        branch.className = 'ev-branch mt-2';
+        branch.appendChild(buildTree(child, byId));
+        children.appendChild(branch);
+      });
+      wrap.appendChild(children);
+
+      // Collapse children together with the parent card
+      const header = card.firstElementChild;
+      header.addEventListener('click', () => {
+        children.classList.toggle('hidden', card.dataset.collapsed === 'true');
+      });
+    }
+    return wrap;
+  }
+
+  // ── Copy helper ────────────────────────────────────────────────────────────
+  function makeCopyBtn(text, title) {
+    const btn = document.createElement('button');
+    btn.className = 'ev-copy-btn';
+    btn.title = title || 'Copy';
+    btn.innerHTML = `<svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+        d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/>
+    </svg>`;
+    btn.addEventListener('click', e => {
+      e.stopPropagation();
+      navigator.clipboard.writeText(text || '').then(() => {
+        btn.classList.add('copied');
+        btn.innerHTML = `<svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
+        </svg>`;
+        setTimeout(() => {
+          btn.classList.remove('copied');
+          btn.innerHTML = `<svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+              d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/>
+          </svg>`;
+        }, 1500);
+      }).catch(() => {});
+    });
+    return btn;
+  }
+
+  // ── Headset SVG icon ───────────────────────────────────────────────────────
+  const HEADSET_SVG = `<svg class="w-3.5 h-3.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+      d="M3 18v-6a9 9 0 0 1 18 0v6M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z"/>
+  </svg>`;
+
+  // ── Event card builder ─────────────────────────────────────────────────────
+  function buildEventCard(ev, byId) {
+    const isErr     = ev.status === 'error';
+    const isPending = ev.status === 'pending';
+
+    const card = document.createElement('div');
+    const borderColor = isErr ? 'border-red-200' : isPending ? 'border-yellow-200' : 'border-gray-200';
+    card.className = `bg-white rounded-xl border ${borderColor} shadow-sm overflow-hidden`;
+
+    // ── Header ──────────────────────────────────────────────────────────────
+    const headerBg = isErr ? 'bg-red-50' : isPending ? 'bg-yellow-50' : 'bg-white';
+    const header = document.createElement('div');
+    header.className = `${headerBg} px-4 py-3 flex items-center gap-2 cursor-pointer select-none border-b border-gray-100`;
+
+    const statusIcon = isErr
+      ? `<span class="flex-shrink-0 w-6 h-6 rounded-full bg-red-100 flex items-center justify-center">
+           <svg class="w-3.5 h-3.5 text-red-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M6 18L18 6M6 6l12 12"/>
+           </svg></span>`
+      : isPending
+        ? `<span class="flex-shrink-0 w-6 h-6 rounded-full bg-yellow-100 flex items-center justify-center">
+             <svg class="w-3.5 h-3.5 text-yellow-600 animate-spin" fill="none" viewBox="0 0 24 24">
+               <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+               <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+             </svg></span>`
+        : `<span class="flex-shrink-0 w-6 h-6 rounded-full bg-green-100 flex items-center justify-center">
+             <svg class="w-3.5 h-3.5 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/>
+             </svg></span>`;
+
+    const asyncBadge = ev.isAsync
+      ? `<span class="text-xs px-2 py-0.5 rounded-full bg-violet-100 text-violet-700 font-medium">async</span>`
+      : `<span class="text-xs px-2 py-0.5 rounded-full bg-gray-100 text-gray-600 font-medium">sync</span>`;
+
+    // "event" type tag
+    const typeBadge = `<span class="text-xs px-2 py-0.5 rounded-full bg-blue-100 text-blue-700 font-semibold uppercase tracking-wide">event</span>`;
+
+    const depthBadge = ev.depth > 0
+      ? `<span class="text-xs px-2 py-0.5 rounded-full bg-amber-100 text-amber-700 font-medium">↳ depth ${ev.depth}</span>`
+      : '';
+
+    const durText = ev.totalDuration
+      ? `<span class="text-xs font-mono ${ev.totalDuration > 500 ? 'text-red-600' : ev.totalDuration > 100 ? 'text-amber-600' : 'text-gray-400'}">${ev.totalDuration}ms</span>`
+      : '';
+
+    const time = new Date(ev.emittedAt).toLocaleTimeString('en', {
+      hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit', fractionalSecondDigits: 3
+    });
+
+    header.innerHTML = `
+      ${statusIcon}
+      <div class="flex-1 min-w-0">
+        <div class="flex items-center gap-2 flex-wrap">
+          ${typeBadge}
+          <span class="font-semibold text-gray-900 text-sm">🔔 ${escHtml(ev.eventName)}</span>
+          ${asyncBadge}${depthBadge}
+          ${ev.childEventIds?.length ? `<span class="text-xs px-2 py-0.5 rounded-full bg-indigo-100 text-indigo-700 font-medium">↳ ${ev.childEventIds.length} child${ev.childEventIds.length > 1 ? 's' : ''}</span>` : ''}
+          <span class="ml-auto flex items-center gap-1">${durText}</span>
+        </div>
+        <div class="flex items-center gap-4 mt-0.5 text-xs text-gray-400">
+          <span title="${escHtml(ev.emitterFile || '')}">⬆ <span class="font-mono">${escHtml(ev.emitterLocation)}</span></span>
+          <span>${time}</span>
+          <span>${(ev.listeners || []).length} listener${ev.listeners?.length !== 1 ? 's' : ''}</span>
+        </div>
+      </div>
+      <svg id="chevron-${ev.id}" class="w-4 h-4 text-gray-400 flex-shrink-0 transition-transform duration-150" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
+      </svg>
+    `;
+
+    // Copy button (emitter file, falls back to location)
+    const copyText = ev.emitterFile || ev.emitterLocation || '';
+    const copyBtn = makeCopyBtn(copyText, copyText ? `Copy: ${copyText}` : 'Copy location');
+    copyBtn.style.marginRight = '4px';
+
+    // Show button → flowchart modal
+    const showBtn = document.createElement('button');
+    showBtn.className = 'inline-flex items-center gap-1 px-2.5 py-1 text-xs font-medium border border-indigo-200 bg-indigo-50 text-indigo-700 rounded-md hover:bg-indigo-100 transition-colors flex-shrink-0';
+    showBtn.innerHTML = `<svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2"/>
+    </svg>Show`;
+    showBtn.addEventListener('click', e => { e.stopPropagation(); showFlowModal(ev.id); });
+
+    // Insert copy + show buttons before the chevron
+    const chevron = header.querySelector('#chevron-' + ev.id);
+    header.insertBefore(showBtn, chevron);
+    header.insertBefore(copyBtn, showBtn);
+
+    // ── Body ────────────────────────────────────────────────────────────────
+    const body = document.createElement('div');
+    body.className = 'divide-y divide-gray-50';
+
+    // Payload
+    if (ev.payloadPreview) {
+      const p = document.createElement('div');
+      p.className = 'px-5 py-3';
+      p.innerHTML = `
+        <p class="text-xs font-medium text-gray-400 uppercase tracking-wide mb-1.5">Payload</p>
+        <pre class="text-xs font-mono text-emerald-700 bg-emerald-50 rounded-lg px-3 py-2 overflow-x-auto whitespace-pre-wrap break-all">${escHtml(ev.payloadPreview)}</pre>`;
+      body.appendChild(p);
+    }
+
+    // Error
+    if (ev.error) {
+      const e = document.createElement('div');
+      e.className = 'px-5 py-3';
+      e.innerHTML = `
+        <p class="text-xs font-medium text-red-400 uppercase tracking-wide mb-1.5">Error</p>
+        <pre class="text-xs font-mono text-red-700 bg-red-50 rounded-lg px-3 py-2 overflow-x-auto">${escHtml(ev.error)}</pre>`;
+      body.appendChild(e);
+    }
+
+    // Listeners
+    if (ev.listeners && ev.listeners.length > 0) {
+      const lw = document.createElement('div');
+      lw.className = 'px-5 py-3';
+      lw.innerHTML = `<p class="text-xs font-medium text-gray-400 uppercase tracking-wide mb-2">Listeners</p>`;
+
+      const list = document.createElement('div');
+      list.className = 'space-y-1.5 ml-2 border-l-2 border-gray-100 pl-4';
+
+      ev.listeners.forEach(l => {
+        const lIsErr = l.status === 'error';
+        const durColor = l.duration > 200 ? 'text-red-600' : l.duration > 50 ? 'text-amber-600' : 'text-green-600';
+
+        // Headset status icon
+        const headsetColor = lIsErr ? 'text-red-500' : 'text-indigo-500';
+        const headsetBg    = lIsErr ? 'bg-red-50 border-red-100' : 'bg-indigo-50 border-indigo-100';
+
+        // "listener" type tag
+        const lTypeBadge = `<span class="text-xs px-1.5 py-0.5 rounded-full bg-violet-100 text-violet-700 font-semibold uppercase tracking-wide" style="font-size:10px">listener</span>`;
+
+        const row = document.createElement('div');
+        row.className = `flex items-center gap-2 px-3 py-1.5 rounded-lg border ${lIsErr ? 'border-red-100 bg-red-50' : 'border-gray-100 bg-gray-50'} text-sm`;
+
+        // Headset icon wrapper
+        const iconWrap = document.createElement('span');
+        iconWrap.className = `flex-shrink-0 w-5 h-5 rounded-full flex items-center justify-center ${headsetBg} ${headsetColor}`;
+        iconWrap.innerHTML = HEADSET_SVG;
+
+        row.appendChild(iconWrap);
+        row.insertAdjacentHTML('beforeend', `
+          ${lTypeBadge}
+          <span class="font-mono text-xs text-gray-700 truncate" title="${escHtml(l.name)}">${escHtml(l.name)}</span>
+          <span class="ml-auto font-mono text-xs ${durColor} flex-shrink-0">${l.duration}ms</span>
+          ${l.error ? `<span class="text-xs text-red-500 truncate max-w-xs flex-shrink-0" title="${escHtml(l.error)}">${escHtml(l.error)}</span>` : ''}
+        `);
+
+        // Copy button: copies file path (preferred) or name
+        const lCopyText = l.file || l.name || '';
+        row.appendChild(makeCopyBtn(lCopyText, lCopyText ? `Copy: ${lCopyText}` : 'Copy name'));
+
+        list.appendChild(row);
+      });
+
+      lw.appendChild(list);
+      body.appendChild(lw);
+    }
+
+    card.appendChild(header);
+    card.appendChild(body);
+
+    // Toggle collapse — also expose state via data-collapsed so buildTree
+    // can sync the children container on the same click.
+    card.dataset.collapsed = 'false';
+    let collapsed = false;
+    header.addEventListener('click', () => {
+      collapsed = !collapsed;
+      card.dataset.collapsed = String(collapsed);
+      body.classList.toggle('hidden', collapsed);
+      const ch = document.getElementById('chevron-' + ev.id);
+      if (ch) ch.style.transform = collapsed ? 'rotate(-90deg)' : '';
+    });
+
+    return card;
+  }
+
+  // ── Stats ──────────────────────────────────────────────────────────────────
+  function updateStats(events) {
+    const roots  = events.filter(e => !e.parentEventId).length;
+    const errors = events.filter(e => e.status === 'error').length;
+    const done   = events.filter(e => e.totalDuration > 0);
+    const avg    = done.length ? Math.round(done.reduce((s,e) => s + e.totalDuration, 0) / done.length) : 0;
+    setText('statTotal',  events.length);
+    setText('statRoot',   roots);
+    setText('statErrors', errors);
+    setText('statAvg',    avg ? avg + 'ms' : '—');
+  }
+
+  function setText(id, val) {
+    const el = document.getElementById(id);
+    if (el) el.textContent = val;
+  }
+
+  function escHtml(str) {
+    return String(str ?? '')
+      .replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
+  }
+
+  // ── Auto-refresh ───────────────────────────────────────────────────────────
+  function toggleAuto() {
+    autoEnabled = !autoEnabled;
+    const dot = document.getElementById('evAutoDot');
+    const btn = document.getElementById('evAutoBtn');
+    if (autoEnabled) {
+      if (dot) dot.className = 'w-2 h-2 rounded-full bg-green-500 animate-pulse';
+      if (btn) { btn.classList.add('border-green-400','text-green-700'); btn.classList.remove('border-gray-300','text-gray-700'); }
+      autoTimer = setInterval(() => loadEvents(true), 3000);
+    } else {
+      if (dot) dot.className = 'w-2 h-2 rounded-full bg-gray-300';
+      if (btn) { btn.classList.remove('border-green-400','text-green-700'); btn.classList.add('border-gray-300','text-gray-700'); }
+      clearInterval(autoTimer);
+    }
+  }
+
+  // ════════════════════════════════════════════════════════════════════════════
+  // FLOWCHART MODAL
+  // ════════════════════════════════════════════════════════════════════════════
+
+  function toggleFlowExpand() {
+    const panel       = document.querySelector('#evFlowModal > div.relative');
+    const expandIcon  = document.getElementById('evFlowExpandIcon');
+    const shrinkIcon  = document.getElementById('evFlowShrinkIcon');
+    const btn         = document.getElementById('evFlowExpandBtn');
+    const isExpanded  = panel.dataset.expanded === 'true';
+
+    if (!isExpanded) {
+      // Go fullscreen
+      panel.dataset.expanded = 'true';
+      panel.classList.remove('max-w-5xl', 'max-h-[88vh]', 'rounded-2xl');
+      panel.classList.add('!max-w-none', '!max-h-none', 'w-screen', 'h-screen', 'rounded-none');
+      expandIcon.classList.add('hidden');
+      shrinkIcon.classList.remove('hidden');
+      btn.title = 'Exit full screen';
+    } else {
+      // Restore
+      panel.dataset.expanded = 'false';
+      panel.classList.add('max-w-5xl', 'max-h-[88vh]', 'rounded-2xl');
+      panel.classList.remove('!max-w-none', '!max-h-none', 'w-screen', 'h-screen', 'rounded-none');
+      expandIcon.classList.remove('hidden');
+      shrinkIcon.classList.add('hidden');
+      btn.title = 'Expand to full screen';
+    }
+  }
+
+  function closeFlowModal() {
+    // Reset expanded state before hiding
+    const panel = document.querySelector('#evFlowModal > div.relative');
+    if (panel && panel.dataset.expanded === 'true') toggleFlowExpand();
+    const m = document.getElementById('evFlowModal');
+    if (m) m.classList.add('hidden');
+  }
+
+  function showFlowModal(evId) {
+    const byId = {};
+    allEvents.forEach(e => byId[e.id] = e);
+    const rootEv = byId[evId];
+    if (!rootEv) return;
+
+    const title = document.getElementById('evFlowTitle');
+    const content = document.getElementById('evFlowContent');
+    if (title) title.textContent = 'Flow: ' + rootEv.eventName;
+    if (content) content.innerHTML = buildFlowSVG(rootEv, byId);
+
+    const modal = document.getElementById('evFlowModal');
+    if (modal) modal.classList.remove('hidden');
+  }
+
+  // ── Layout constants ───────────────────────────────────────────────────────
+  const FC = {
+    EW: 220, EH: 80,      // event node width / height
+    LW: 240, LH: 78,      // listener node width / height
+    HGAP: 18,             // gap between sibling columns
+    VGAP: 48,             // gap between levels
+    PAD: 24,              // canvas padding
+  };
+
+  // ── Build tree structure ───────────────────────────────────────────────────
+  // Returns {type:'event', ev, children:[listenerNode...]}
+  // listenerNode: {type:'listener', listener, index, child: eventNode|null}
+  function buildFlowTree(ev, byId) {
+    const listeners = (ev.listeners || []).map((l, i) => {
+      const lNode = { type: 'listener', listener: l, index: i, child: null };
+
+      // Match a child event to this listener via timestamp overlap
+      if (ev.childEventIds && ev.childEventIds.length > 0 && l.startTime > 0) {
+        const childEv = ev.childEventIds
+          .map(id => byId[id]).filter(Boolean)
+          .find(child =>
+            child.emittedAt >= l.startTime &&
+            child.emittedAt <= (l.startTime + l.duration + 50)
+          );
+        if (childEv) lNode.child = buildFlowTree(childEv, byId);
+      }
+      return lNode;
+    });
+    return { type: 'event', ev, children: listeners };
+  }
+
+  // ── Subtree width ──────────────────────────────────────────────────────────
+  function subtreeWidth(node) {
+    if (node.type === 'listener') {
+      return node.child
+        ? Math.max(FC.LW, subtreeWidth(node.child))
+        : FC.LW;
+    }
+    // event
+    if (!node.children.length) return FC.EW;
+    const childrenW = node.children.reduce((s, c) => s + subtreeWidth(c) + FC.HGAP, -FC.HGAP);
+    return Math.max(FC.EW, childrenW);
+  }
+
+  // ── Assign x/y positions (mutates nodes in-place) ─────────────────────────
+  function assignPos(node, left, top, nodes, edges) {
+    const sw = subtreeWidth(node);
+    const w  = node.type === 'listener' ? FC.LW : FC.EW;
+    const h  = node.type === 'listener' ? FC.LH : FC.EH;
+    const cx = left + sw / 2;
+
+    Object.assign(node, {
+      x: cx - w / 2, y: top, w, h,
+      cx, cy: top + h / 2,
+      bx: cx, by: top + h,
+      tx: cx, ty: top,
+    });
+    nodes.push(node);
+
+    if (node.type === 'event') {
+      let lx = left;
+      node.children.forEach(child => {
+        const cw = subtreeWidth(child);
+        assignPos(child, lx, top + FC.EH + FC.VGAP, nodes, edges);
+        edges.push({ from: node, to: child });
+        lx += cw + FC.HGAP;
+      });
+    } else {
+      if (node.child) {
+        assignPos(node.child, left, top + FC.LH + FC.VGAP, nodes, edges);
+        edges.push({ from: node, to: node.child });
+      }
+    }
+  }
+
+  // ── SVG escape ─────────────────────────────────────────────────────────────
+  function escSVG(s) {
+    return String(s || '').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
+  }
+
+  function truncate(s, n) { return s.length > n ? s.slice(0, n - 1) + '…' : s; }
+
+  // ── Build the SVG string ───────────────────────────────────────────────────
+  function buildFlowSVG(rootEv, byId) {
+    const tree   = buildFlowTree(rootEv, byId);
+    const nodes  = [], edges = [];
+    assignPos(tree, 0, 0, nodes, edges);
+
+    const maxX = Math.max(...nodes.map(n => n.x + n.w));
+    const maxY = Math.max(...nodes.map(n => n.y + n.h));
+    const W    = maxX + FC.PAD * 2;
+    const H    = maxY + FC.PAD * 2;
+
+    let inner = '';
+
+    // ── Edges (bezier with arrow) ──────────────────────────────────────────
+    edges.forEach(({ from, to }) => {
+      const midY = (from.by + to.ty) / 2;
+      inner += `<path d="M${from.bx},${from.by} C${from.bx},${midY} ${to.tx},${midY} ${to.tx},${to.ty}"
+        fill="none" stroke="#cbd5e1" stroke-width="2"/>
+      <polygon points="${to.tx-4},${to.ty-7} ${to.tx+4},${to.ty-7} ${to.tx},${to.ty}" fill="#cbd5e1"/>`;
+    });
+
+    // ── Nodes ─────────────────────────────────────────────────────────────
+    nodes.forEach(n => {
+      if (n.type === 'event') {
+        const ev      = n.ev;
+        const isErr   = ev.status === 'error';
+        const fill    = isErr ? '#fff1f2' : '#eff6ff';
+        const stroke  = isErr ? '#fca5a5' : '#93c5fd';
+        const nameClr = isErr ? '#be123c'  : '#1d4ed8';
+        const badge   = ev.isAsync ? 'async' : 'sync';
+        const dur     = ev.totalDuration ? `${ev.totalDuration}ms` : '…';
+        const tick    = ev.status === 'error' ? '✗' : ev.status === 'pending' ? '…' : '✓';
+        const name    = truncate(ev.eventName, 22);
+        const loc     = truncate(ev.emitterLocation || '', 28);
+
+        inner += `
+          <rect x="${n.x}" y="${n.y}" width="${n.w}" height="${n.h}" rx="12"
+            fill="${fill}" stroke="${stroke}" stroke-width="2"/>
+          <rect x="${n.x+6}" y="${n.y+6}" width="38" height="16" rx="4" fill="${stroke}" opacity="0.4"/>
+          <text x="${n.x+25}" y="${n.y+17.5}" text-anchor="middle" font-size="9" font-weight="700"
+            fill="${nameClr}" letter-spacing="0.5">EVENT</text>
+          <text x="${n.cx}" y="${n.y+35}" text-anchor="middle" font-size="12" font-weight="700"
+            fill="${nameClr}">${escSVG(name)}</text>
+          <text x="${n.cx}" y="${n.y+52}" text-anchor="middle" font-size="10" fill="#64748b">${escSVG(badge)} · ${escSVG(dur)} · ${escSVG(tick)}</text>
+          <text x="${n.cx}" y="${n.y+67}" text-anchor="middle" font-size="9" fill="#94a3b8">${escSVG(loc)}</text>`;
+      } else {
+        const l      = n.listener;
+        const isErr  = l.status === 'error';
+        const fill   = isErr ? '#fff1f2' : '#faf5ff';
+        const stroke = isErr ? '#fca5a5' : '#c4b5fd';
+        const clr    = isErr ? '#be123c' : '#4338ca';
+        const durClr = l.duration > 200 ? '#dc2626' : l.duration > 50 ? '#d97706' : '#16a34a';
+        const tick   = l.status === 'error' ? '✗' : '✓';
+        const name   = truncate(l.name, 30);
+        const file   = l.file ? truncate(l.file.split('/').pop() || '', 34) : '';
+
+        inner += `
+          <rect x="${n.x}" y="${n.y}" width="${n.w}" height="${n.h}" rx="10"
+            fill="${fill}" stroke="${stroke}" stroke-width="2"/>
+          <rect x="${n.x+6}" y="${n.y+6}" width="52" height="16" rx="4" fill="${stroke}" opacity="0.4"/>
+          <text x="${n.x+32}" y="${n.y+18}" text-anchor="middle" font-size="9" font-weight="700"
+            fill="${clr}" letter-spacing="0.5">LISTENER</text>
+          <text x="${n.cx}" y="${n.y+37}" text-anchor="middle" font-size="11" font-weight="600"
+            fill="${clr}">${escSVG(name)}</text>
+          <text x="${n.cx}" y="${n.y+54}" text-anchor="middle" font-size="10" fill="${durClr}">${l.duration}ms ${escSVG(tick)}</text>
+          ${file ? `<text x="${n.cx}" y="${n.y+69}" text-anchor="middle" font-size="9" fill="#94a3b8">${escSVG(file)}</text>` : ''}`;
+      }
+    });
+
+    return `<div style="overflow:auto">
+      <svg viewBox="0 0 ${W} ${H}" xmlns="http://www.w3.org/2000/svg"
+        style="min-width:${W}px;min-height:${H}px;display:block"
+        font-family="ui-monospace,SFMono-Regular,Menlo,monospace">
+        <g transform="translate(${FC.PAD},${FC.PAD})">${inner}</g>
+      </svg></div>`;
+  }
+
+  // ── Expose globals ─────────────────────────────────────────────────────────
+  window.loadEvents           = loadEvents;
+  window.renderFilteredEvents = renderFilteredEvents;
+  window.toggleAuto           = toggleAuto;
+  window.showFlowModal        = showFlowModal;
+  window.closeFlowModal       = closeFlowModal;
+  window.toggleFlowExpand     = toggleFlowExpand;
+
+  loadEvents();
+
+  window.addEventListener('profilerNavigate', () => { clearInterval(autoTimer); autoEnabled = false; }, { once: true });
+})();
+</script>