opticore-profiler 1.0.0

package/dist/assets/css/toolbar-standalone.css

@@ -0,0 +1,213 @@
+* { box-sizing: border-box; margin: 0; padding: 0; }
+body {
+  background: transparent;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, monospace;
+  font-size: 12px;
+}
+.toolbar {
+  position: fixed; bottom: 0; left: 0; right: 0;
+  height: 36px;
+  background: #1b1b1b;
+  border-top: 1px solid #2e2e2e;
+  display: flex;
+  align-items: stretch;
+  z-index: 99999;
+  box-shadow: 0 -2px 8px rgba(0,0,0,.4);
+}
+.tb-badge {
+  display: inline-flex; align-items: center; justify-content: center;
+  padding: 0 10px;
+  font-weight: 700; font-size: 12px; color: #fff;
+  text-decoration: none; height: 100%;
+  transition: opacity .15s;
+}
+.tb-badge:hover { opacity: .85; }
+.tb-badge--s-ok       { background: #2e7d32; }
+.tb-badge--s-warn     { background: #c0392b; }
+.tb-badge--s-error    { background: #c0392b; }
+.tb-badge--s-redirect { background: #1565c0; }
+.tb-block {
+  display: flex; align-items: center; gap: 5px;
+  padding: 0 10px; color: #ccc; text-decoration: none;
+  height: 100%; white-space: nowrap;
+  transition: background .15s; cursor: pointer;
+}
+.tb-block:hover { background: #252525; color: #fff; }
+.tb-icon { color: #888; display: flex; align-items: center; }
+.tb-block:hover .tb-icon { color: #aaa; }
+.tb-label { font-size: 12px; }
+.tb-underline { border-bottom: 2px solid #e74c3c; }
+.tb-spacer { flex: 1; }
+.tb-brand {
+  display: flex; align-items: center; gap: 6px;
+  padding: 0 12px; color: #ccc; text-decoration: none;
+  border-left: 1px solid #2e2e2e; height: 100%; font-weight: 500;
+}
+.tb-brand:hover { background: #252525; }
+.tb-brand-icon {
+  width: 20px; height: 20px; background: #C87A3C;
+  border-radius: 4px; display: flex; align-items: center;
+  justify-content: center; font-size: 10px; font-weight: 900;
+  color: #fff; flex-shrink: 0;
+}
+.tb-version {
+  display: flex; align-items: center; padding: 0 10px;
+  color: #888; font-size: 11px;
+  border-left: 1px solid #2e2e2e; height: 100%; white-space: nowrap;
+}
+.lang-switch--toolbar {
+  display: flex; align-items: center; gap: 2px; height: 100%;
+  padding: 0 8px; border-left: 1px solid #2e2e2e;
+}
+.lang-switch--toolbar .lang-switch-item {
+  padding: 3px 6px; font-size: 10px; font-weight: 700; letter-spacing: .3px;
+  color: #777; border-radius: 3px; text-decoration: none;
+}
+.lang-switch--toolbar .lang-switch-item.active { background: #2e2e2e; color: #FAC68E; }
+.lang-switch--toolbar .lang-switch-item:hover:not(.active) { color: #ccc; }
+.tb-collapse {
+  display: flex; align-items: center; justify-content: center;
+  width: 36px; color: #555; cursor: pointer;
+  border: none; background: none;
+  border-left: 1px solid #2e2e2e; height: 100%;
+  font-size: 13px; transition: background .15s, color .15s;
+  flex-shrink: 0;
+}
+.tb-collapse:hover { background: #333; color: #ccc; }
+.tb-badge-pill {
+  display: inline-flex; align-items: center; justify-content: center;
+  background: #c0392b; color: #fff; border-radius: 10px;
+  font-size: 10px; font-weight: 700; min-width: 16px; height: 16px;
+  padding: 0 4px; margin-left: 2px;
+}
+.tb-badge-pill--warn { background: #e67e22; }
+.tb-badge-pill--ok   { background: #2e7d32; }
+.tb-time-bar {
+  width: 100%; height: 2px; background: #e74c3c;
+  position: absolute; bottom: 0; left: 0;
+}
+/* HTTP requests tooltip */
+.tb-http-block { position: relative; }
+.tb-http-tooltip {
+  display: none;
+  position: absolute; bottom: 100%; left: 0;
+  background: #1e1e1e; border: 1px solid #333; border-radius: 6px;
+  min-width: 500px; z-index: 100000;
+  box-shadow: 0 -4px 20px rgba(0,0,0,.7); overflow: hidden;
+  /* flush against the trigger block (no gap) so the mouse never leaves the
+     hoverable area while moving from the block up into the dropdown —
+     a gap here would break :hover before the pointer reaches the content */
+  margin-bottom: 0;
+}
+.tb-http-block:hover .tb-http-tooltip { display: block; }
+.tb-tip-header {
+  display: flex; justify-content: space-between; align-items: center;
+  padding: 8px 12px; background: #161616; border-bottom: 1px solid #333;
+  font-size: 11px; color: #888; text-transform: uppercase; letter-spacing: .5px;
+}
+.tb-tip-viewall { color: #7c98d3; text-decoration: none; font-size: 11px; }
+.tb-tip-viewall:hover { text-decoration: underline; }
+.tb-tip-table { width: 100%; border-collapse: collapse; font-size: 11px; }
+.tb-tip-table th {
+  text-align: left; padding: 5px 10px;
+  color: #666; font-weight: 600; font-size: 10px;
+  text-transform: uppercase; letter-spacing: .4px;
+  border-bottom: 1px solid #2a2a2a; background: #1a1a1a;
+}
+.tb-tip-table td { padding: 5px 10px; color: #bbb; border-bottom: 1px solid #252525; }
+.tb-tip-table tr:last-child td { border-bottom: none; }
+.tb-tip-table tr:hover td { background: #262626; }
+.tip-current td { background: #1e2a1e !important; }
+.tip-method {
+  display: inline-block; padding: 1px 6px; border-radius: 3px;
+  font-size: 10px; font-weight: 700; min-width: 52px; text-align: center;
+}
+.tip-m-get     { background: #1565c0; color: #fff; }
+.tip-m-post    { background: #e67e22; color: #fff; }
+.tip-m-put     { background: #8e44ad; color: #fff; }
+.tip-m-patch   { background: #16a085; color: #fff; }
+.tip-m-delete  { background: #c0392b; color: #fff; }
+.tip-m-head,
+.tip-m-options { background: #555; color: #fff; }
+.tip-s-ok    { color: #2ecc71; font-weight: 600; }
+.tip-s-redir { color: #3498db; font-weight: 600; }
+.tip-s-err   { color: #e74c3c; font-weight: 600; }
+.tip-dur  { color: #888; white-space: nowrap; }
+.tip-url-link { color: #ccc; text-decoration: none; }
+.tip-url-link:hover { color: #7c98d3; }
+
+/* ── per-block hover tooltip (status, duration, memory, logs, route, server) ── */
+.tb-block-wrap { position: relative; display: flex; align-items: stretch; height: 100%; }
+.tb-tooltip {
+  display: none;
+  position: absolute; bottom: 100%; left: 0;
+  background: #1e1e1e; border: 1px solid #333; border-radius: 6px;
+  padding: 10px 0 6px; min-width: 240px; z-index: 100000;
+  box-shadow: 0 -4px 20px rgba(0,0,0,.7);
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, monospace;
+  /* flush against the trigger block (no gap) — see .tb-http-tooltip */
+  margin-bottom: 0;
+}
+.tb-block-wrap:hover .tb-tooltip { display: block; }
+/* blocks near the toolbar's right edge (Server, version) — anchor from the
+   right so the tooltip grows leftward and stays inside the viewport */
+.tb-tooltip--right { left: auto; right: 0; }
+.tt-row {
+  display: flex; align-items: baseline;
+  padding: 3px 14px; gap: 8px; line-height: 1.6;
+}
+.tt-label {
+  color: #666; font-size: 11px; white-space: nowrap;
+  min-width: 90px; flex-shrink: 0;
+}
+.tt-val { color: #d4d4d4; font-size: 12px; word-break: break-all; }
+.tt-val code {
+  background: #111; border: 1px solid #2a2a2a; padding: 1px 5px;
+  border-radius: 3px; font-size: 11px; color: #aaa;
+}
+.tt-badge {
+  display: inline-flex; align-items: center;
+  padding: 1px 7px; border-radius: 10px;
+  font-size: 10px; font-weight: 700; color: #fff;
+}
+.tt-sep { height: 1px; background: #2a2a2a; margin: 6px 0; }
+.tt-link {
+  display: flex; align-items: center; gap: 6px;
+  padding: 4px 14px; color: #FAC68E; font-size: 12px;
+  text-decoration: none; transition: background .1s;
+}
+.tt-link:hover { background: #252525; color: #FBD4A8; }
+
+/* ── collapsed mini pill (bottom-right) ── */
+#wdt-mini {
+  position: fixed; bottom: 12px; right: 12px; z-index: 99999;
+  display: none; align-items: center;
+  background: #1b1b1b; border: 1px solid #333; border-radius: 24px;
+  box-shadow: 0 4px 18px rgba(0,0,0,.6); overflow: hidden;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, monospace;
+}
+#wdt-mini-logo {
+  display: flex; align-items: center; gap: 7px;
+  padding: 0 12px 0 10px; height: 34px;
+  border-right: 1px solid #2a2a2a;
+  color: #ccc; font-size: 12px; font-weight: 500; text-decoration: none;
+}
+#wdt-mini-logo-icon {
+  width: 22px; height: 22px; background: #FAC68E; border-radius: 50%;
+  display: flex; align-items: center; justify-content: center;
+  font-size: 9px; font-weight: 900; color: #fff; flex-shrink: 0;
+}
+#wdt-mini-status {
+  display: inline-flex; align-items: center; justify-content: center;
+  padding: 0 10px; height: 34px;
+  font-size: 12px; font-weight: 700; color: #fff;
+  border-right: 1px solid #2a2a2a; min-width: 44px;
+  text-decoration: none; transition: opacity .15s;
+}
+#wdt-mini-status:hover { opacity: .85; }
+#wdt-mini-expand {
+  display: flex; align-items: center; justify-content: center;
+  width: 32px; height: 34px; color: #555; font-size: 13px;
+  border: none; background: none; cursor: pointer; transition: color .15s;
+}
+#wdt-mini-expand:hover { color: #ccc; }

package/dist/assets/js/home-particles.js

@@ -0,0 +1,65 @@
+(function() {
+    var cv = document.getElementById('op-canvas');
+    var cx = cv.getContext('2d');
+    var W, H;
+
+    function resize() {
+        W = cv.width  = window.innerWidth;
+        H = cv.height = window.innerHeight;
+    }
+    resize();
+    window.addEventListener('resize', resize);
+
+    /* palette sable / poussière du désert */
+    var COLORS = [
+        '#150F04','#150F04','#150F04','#150F04',
+        '#150F04','#150F04','#150F04','#150F04'
+    ];
+
+    /* génère une particule */
+    function mkParticle() {
+        return {
+            x: Math.random() * W,
+            y: Math.random() * H,
+            r: Math.random() * 2.2 + 0.4,
+            color: COLORS[Math.floor(Math.random() * COLORS.length)],
+            alpha: Math.random() * 0.45 + 0.15,
+            /* vitesse : chute lente + dérive latérale (vent du désert) */
+            vy: Math.random() * 0.55 + 0.18,
+            vx: (Math.random() - 0.38) * 0.30,
+            /* oscillation sinusoïdale */
+            wobble: Math.random() * Math.PI * 2,
+            ws:     Math.random() * 0.018 + 0.004,
+            wa:     Math.random() * 0.6 + 0.2,
+        };
+    }
+
+    var N = 220;
+    var pts = [];
+    for (var i = 0; i < N; i++) pts.push(mkParticle());
+
+    function tick() {
+        cx.clearRect(0, 0, W, H);
+        for (var i = 0; i < N; i++) {
+            var p = pts[i];
+            p.wobble += p.ws;
+            p.x += p.vx + Math.sin(p.wobble) * p.wa * 0.25;
+            p.y += p.vy;
+
+            /* recycle en haut quand hors écran */
+            if (p.y > H + 6)  { p.y = -6;  p.x = Math.random() * W; }
+            if (p.x >  W + 6) { p.x = -6; }
+            if (p.x < -6)     { p.x = W + 6; }
+
+            cx.save();
+            cx.globalAlpha = p.alpha;
+            cx.fillStyle   = p.color;
+            cx.beginPath();
+            cx.arc(p.x, p.y, p.r, 0, 6.283);
+            cx.fill();
+            cx.restore();
+        }
+        requestAnimationFrame(tick);
+    }
+    tick();
+})();

package/dist/assets/js/profiler-detail.js

@@ -0,0 +1,77 @@
+function filterTable(input) {
+    const q = input.value.toLowerCase();
+    const wrap = input.closest(".table-wrap");
+    if (!wrap) return;
+    wrap.querySelectorAll("tbody tr").forEach(r => {
+        r.style.display = r.textContent.toLowerCase().includes(q) ? "" : "none";
+    });
+}
+
+function toggleLogCtx(id, btn) {
+    var el = document.getElementById(id);
+    if (!el) return;
+    var i18n = window.__opticoreProfilerI18n || {};
+    var shown = el.style.display === 'block';
+    el.style.display = shown ? 'none' : 'block';
+    btn.textContent = shown ? (i18n.showContext || 'Show context') : (i18n.hideContext || 'Hide context');
+}
+
+(function() {
+    var tabs = document.querySelectorAll('#log-tabs .log-tab');
+    var rows = document.querySelectorAll('#log-tbody .log-row');
+    tabs.forEach(function(tab) {
+        tab.addEventListener('click', function() {
+            var f = this.getAttribute('data-ltab');
+            tabs.forEach(function(t) { t.classList.remove('active'); });
+            this.classList.add('active');
+            rows.forEach(function(row) {
+                row.style.display = (f === 'all' || row.getAttribute('data-ltype') === f) ? '' : 'none';
+            });
+        });
+    });
+})();
+
+document.addEventListener("keydown", e => {
+    if (e.key === "Escape") location.href = "/_profiler";
+});
+
+(function () {
+    var tabs = document.querySelectorAll('#rr-tabs .rr-tab');
+    var panels = document.querySelectorAll('.rr-tabpanel');
+    if (!tabs.length) return;
+    tabs.forEach(function (tab) {
+        tab.addEventListener('click', function () {
+            var target = this.getAttribute('data-rtab');
+            tabs.forEach(function (t) { t.classList.remove('active'); });
+            this.classList.add('active');
+            panels.forEach(function (p) {
+                p.style.display = (p.getAttribute('data-rpanel') === target) ? '' : 'none';
+            });
+        });
+    });
+})();
+
+function copyCurl(btn) {
+    var pre = btn.parentElement.querySelector('pre');
+    if (!pre) return;
+    var text = pre.textContent;
+    var done = function () {
+        var i18n = window.__opticoreProfilerI18n || {};
+        var original = btn.textContent;
+        btn.textContent = i18n.copied || 'Copied!';
+        setTimeout(function () { btn.textContent = original; }, 1200);
+    };
+    if (navigator.clipboard && navigator.clipboard.writeText) {
+        navigator.clipboard.writeText(text).then(done, function () {});
+        return;
+    }
+    var ta = document.createElement('textarea');
+    ta.value = text;
+    ta.style.position = 'fixed';
+    ta.style.opacity = '0';
+    document.body.appendChild(ta);
+    ta.select();
+    try { document.execCommand('copy'); } catch (e) { /* best-effort fallback */ }
+    document.body.removeChild(ta);
+    done();
+}

package/dist/assets/js/profiler-list.js

@@ -0,0 +1,76 @@
+(function () {
+    function escapeHtml(str) {
+        return String(str == null ? "" : str)
+            .replace(/&/g, "&")
+            .replace(/</g, "&lt;")
+            .replace(/>/g, "&gt;")
+            .replace(/"/g, "&quot;");
+    }
+
+    function rowHtml(row) {
+        return (
+            '<tr class="pl-row"  onclick="location.href=\'/_profiler/' + escapeHtml(row.token) + '\'">' +
+            '<td class="pl-cell"><span class="pl-status-badge pl-status-badge--' + escapeHtml(row.statusClass) + '">' + row.statusCode + "</span></td>" +
+            '<td class="pl-cell">' + escapeHtml(row.method) + "</td>" +
+            '<td class="pl-cell pl-cell-url" title="' + escapeHtml(row.url) + '">' + escapeHtml(row.url) + "</td>" +
+            '<td class="pl-cell pl-cell-date">' + escapeHtml(row.dateStr) + '<br><span class="pl-cell-time">' + escapeHtml(row.timeStr) + "</span></td>" +
+            '<td class="pl-cell"><a href="/_profiler/' + escapeHtml(row.token) + '" onclick="event.stopPropagation()" class="pl-token-link">' + escapeHtml(row.tokenShort) + "</a></td>" +
+            "</tr>"
+        );
+    }
+
+    function limitFromUrl() {
+        var limit = parseInt(new URLSearchParams(location.search).get("limit") || "10", 10);
+        return [10, 25, 50, 100].indexOf(limit) !== -1 ? limit : 10;
+    }
+
+    /**
+     * Live-updates the results table as the server profiles new requests —
+     * replaces the previous `setTimeout(() => location.reload(), 5000)`
+     * polling: the page only re-renders when the server actually pushes a
+     * new profile over SSE, never on a blind timer.
+     */
+    function connectLiveUpdates() {
+        if (typeof EventSource === "undefined") return;
+
+        var table = document.querySelector(".pl-table tbody");
+        var heading = document.querySelector(".pl-section-heading");
+        var limit = limitFromUrl();
+        var count = table ? table.querySelectorAll(".pl-row").length : 0;
+
+        var es = new EventSource("/_profiler/stream");
+        es.addEventListener("profile", function (evt) {
+            if (!table) return;
+            var row = JSON.parse(evt.data);
+
+            var emptyRow = table.querySelector(".pl-empty-row");
+            if (emptyRow) emptyRow.closest("tr").remove();
+
+            table.insertAdjacentHTML("afterbegin", rowHtml(row));
+            count++;
+
+            while (table.querySelectorAll(".pl-row").length > limit) {
+                table.removeChild(table.lastElementChild);
+            }
+
+            if (heading) {
+                var shown = Math.min(count, limit);
+                var i18n = window.__opticoreProfilerI18n || {};
+                var template = shown === 1
+                    ? (i18n.resultsFoundOne || "{n} result found")
+                    : (i18n.resultsFoundOther || "{n} results found");
+                heading.textContent = template.replace("{n}", shown);
+            }
+        });
+    }
+
+    if (document.body.dataset.autoreload === "1") {
+        connectLiveUpdates();
+    }
+
+    document.addEventListener("keydown", e => {
+        if (e.key === "r" && !e.ctrlKey && !e.metaKey && document.activeElement.tagName !== "INPUT") {
+            location.reload();
+        }
+    });
+})();

package/dist/assets/js/toolbar.js

@@ -0,0 +1,230 @@
+(function () {
+    let ROUTE_PREFIX = window.__opticoreProfilerRoutePrefix || "/_profiler";
+    let OWN_TOKEN = window.__opticoreProfilerToken || null;
+    let MAX_ROWS = 10;
+    // A request reaches addAjaxRow at most once even though two independent
+    // sources feed it: the fetch/XHR instrumentation (for calls this page's
+    // own JS makes) and the SSE stream (for every request the server
+    // profiles, including this page's own — both fire for the same token).
+    let seenTokens = {};
+
+    // collapse the full bar down to the bottom-right mini pill (does NOT close it)
+    window.wdtCollapse = function () {
+        let bar = document.getElementById("wdt");
+        let mini = document.getElementById("wdt-mini");
+        if (bar) {
+            bar.style.display = "none";
+        }
+        if (mini) {
+            mini.style.display = "flex";
+        }
+    };
+    window.wdtExpand = function () {
+        let bar = document.getElementById("wdt");
+        let mini = document.getElementById("wdt-mini");
+        if (mini) {
+            mini.style.display = "none";
+        }
+        if (bar) {
+            bar.style.display = "flex";
+        }
+    };
+
+    function escapeHtml(str) {
+        return String(str == null ? "" : str)
+            .replace(/&/g, "&")
+            .replace(/</g, "&lt;")
+            .replace(/>/g, "&gt;")
+            .replace(/"/g, "&quot;");
+    }
+
+    function statusClass(code) {
+        if (code >= 400) {
+            return "tip-s-err";
+        }
+        if (code >= 300) {
+            return "tip-s-redir";
+        }
+
+        return "tip-s-ok";
+    }
+
+    function fmtDuration(ms) {
+        return ms < 1000 ? Math.round(ms) + " ms" : (ms / 1000).toFixed(2) + " s";
+    }
+
+    function truncateUrl(url, max) {
+        max = max || 38;
+        return url.length > max ? url.slice(0, max - 1) + "…" : url;
+    }
+
+    /** Same rule as the server's isApiRequest() (toolbar.view.ts): an HTML
+     * response is a page navigation, not a business/API call — keep those
+     * out of the "HTTP requests" panel. */
+    function isApiContentType(contentType) {
+        return !contentType || contentType.toLowerCase().indexOf("text/html") !== 0;
+    }
+
+    function isProfilerUrl(url) {
+        try {
+            let path = new URL(url, window.location.origin).pathname;
+            return path.indexOf(ROUTE_PREFIX) === 0;
+        } catch (e) {
+            return false;
+        }
+    }
+
+    /**
+     * Records one AJAX request the current page made, mirroring what the
+     * server already knows about it (X-Debug-Token / X-Debug-Token-Link
+     * headers, present on every profiled response) into the toolbar's
+     * "HTTP requests" list — client-side, without polling the server.
+     */
+    function addAjaxRow(entry) {
+        if (seenTokens[entry.token]) return;
+        seenTokens[entry.token] = true;
+
+        let table = document.getElementById("wdt-ajax-table");
+        let countEl = document.getElementById("wdt-ajax-count");
+        let emptyEl = document.getElementById("wdt-ajax-empty");
+        if (!table) return;
+
+        let tbody = table.querySelector("tbody");
+        if (!tbody) return;
+
+        if (emptyEl) emptyEl.style.display = "none";
+
+        let row = document.createElement("tr");
+        row.innerHTML =
+            '<td><span class="tip-method tip-m-' + escapeHtml(entry.method.toLowerCase()) + '">' + escapeHtml(entry.method) + "</span></td>" +
+            '<td><a href="' + escapeHtml(ROUTE_PREFIX + "/" + entry.token) + '" class="tip-url-link" title="' + escapeHtml(entry.url) + '">' + escapeHtml(truncateUrl(entry.url)) + "</a></td>" +
+            '<td class="' + statusClass(entry.statusCode) + '">' + entry.statusCode + "</td>" +
+            '<td class="tip-dur">' + fmtDuration(entry.duration) + "</td>";
+        tbody.insertBefore(row, tbody.firstChild);
+
+        while (tbody.children.length > MAX_ROWS) {
+            tbody.removeChild(tbody.lastChild);
+        }
+
+        let n = tbody.children.length;
+        if (countEl) {
+            countEl.textContent = n;
+        }
+
+        // The "Last N HTTP Requests" / "View all" header is only rendered
+        // server-side when the toolbar's initial snapshot already had a row
+        // (see toolbar-wdt.njk) — without this, the very first row added
+        // live (e.g. the page loaded with 0 API requests logged yet) would
+        // leave the header stuck on the empty-state "HTTP Requests" text,
+        // permanently hiding the "View all" link even once rows exist.
+        let headerEl = document.getElementById("wdt-ajax-header");
+        if (headerEl) {
+            let i18n = window.__opticoreProfilerI18n || {};
+            let lastNTemplate = i18n.lastNRequests || "Last {n} HTTP Requests";
+            let viewAllLabel = i18n.viewAll || "View all →";
+            headerEl.innerHTML =
+                "<span>" + escapeHtml(lastNTemplate.replace("{n}", n)) + "</span>" +
+                '<a href="' + escapeHtml(ROUTE_PREFIX) + '" class="tb-tip-viewall">' + escapeHtml(viewAllLabel) + "</a>";
+        }
+    }
+
+    function fromHeaders(method, url, statusCode, duration, getHeader) {
+        let token = getHeader("x-debug-token");
+        if (!token || isProfilerUrl(url)) {
+            return;
+        }
+        if (!isApiContentType(getHeader("content-type"))) {
+            return;
+        }
+        addAjaxRow({ method: method, url: url, token: token, statusCode: statusCode, duration: duration });
+    }
+
+    function instrumentFetch() {
+        if (typeof window.fetch !== "function" || window.fetch.__opticoreProfilerWrapped) {
+            return;
+        }
+
+        let originalFetch = window.fetch;
+        let wrapped = function (input, init) {
+            let method = (init && init.method) || (input && input.method) || "GET";
+            let url = typeof input === "string" ? input : (input && input.url) || "";
+            let start = performance.now();
+
+            return originalFetch.apply(this, arguments).then(function (response) {
+                fromHeaders(method, url || response.url, response.status, performance.now() - start, function (h) {
+                    return response.headers.get(h);
+                });
+                return response;
+            });
+        };
+        wrapped.__opticoreProfilerWrapped = true;
+        window.fetch = wrapped;
+    }
+
+    function instrumentXhr() {
+        let proto = window.XMLHttpRequest && window.XMLHttpRequest.prototype;
+        if (!proto || proto.open.__opticoreProfilerWrapped) {
+            return;
+        }
+
+        let originalOpen = proto.open;
+        let originalSend = proto.send;
+
+        proto.open = function (method, url) {
+            this.__opticoreMethod = method;
+            this.__opticoreUrl = url;
+            return originalOpen.apply(this, arguments);
+        };
+        proto.open.__opticoreProfilerWrapped = true;
+
+        proto.send = function () {
+            let start = performance.now();
+            this.addEventListener("loadend", function () {
+                fromHeaders(
+                    this.__opticoreMethod || "GET",
+                    this.__opticoreUrl || "",
+                    this.status,
+                    performance.now() - start,
+                    function (h) { return this.getResponseHeader(h); }.bind(this)
+                );
+            });
+            return originalSend.apply(this, arguments);
+        };
+    }
+
+    /**
+     * Keeps the toolbar's HTTP-requests counter and table in sync with
+     * requests the *server* profiles — including ones this page's own JS
+     * never made (another tab, curl, Postman...) — by subscribing to the
+     * same SSE feed that already powers the profiler list page's live
+     * updates, instead of leaving the toolbar frozen at its page-load
+     * snapshot until a manual reload.
+     */
+    function connectLiveUpdates() {
+        if (typeof EventSource === "undefined") {
+            return;
+        }
+
+        let es = new EventSource(ROUTE_PREFIX + "/stream");
+        es.addEventListener("profile", function (evt) {
+            let row = JSON.parse(evt.data);
+            if (OWN_TOKEN && row.token === OWN_TOKEN) {
+                return;
+            }
+            if (!isApiContentType(row.contentType)) {
+                return;
+            }
+            addAjaxRow({
+                method: row.method,
+                url: row.url,
+                token: row.token,
+                statusCode: row.statusCode,
+                duration: row.duration,
+            });
+        });
+    }
+
+    instrumentFetch();
+    instrumentXhr();
+    connectLiveUpdates();
+})();