@metricinsights/pp-dev 1.5.0-beta.3 → 1.5.0-beta.31

package/dist/client/request-inspector.js

@@ -0,0 +1,549 @@
+// localStorage helpers guarded against environments where storage is unavailable
+// (e.g. sandboxed iframes). Keys follow the original `pp-dev-info-closed` naming.
+const STORAGE_KEYS = {
+    /** Shared with the standalone Inspector/Variables Editor pages — same key, same values. */
+    theme: 'pp-dev-info-theme',
+};
+function checkLocalStorage() {
+    try {
+        localStorage.setItem('test', 'test');
+        localStorage.removeItem('test');
+        return true;
+    }
+    catch (e) {
+        return false;
+    }
+}
+function setStorageItem(key, value) {
+    if (checkLocalStorage()) {
+        localStorage.setItem(key, value);
+    }
+}
+function getStorageItem(key) {
+    if (checkLocalStorage()) {
+        return localStorage.getItem(key);
+    }
+    return null;
+}
+
+// Theme override (Auto/Dark/Light), shared across the dev panel and the standalone
+// Inspector/Variables Editor pages via the same localStorage key (see STORAGE_KEYS.theme) and
+// the same `data-pp-dev-theme` attribute convention (prefixed to avoid colliding with a host
+// Portal Page's own theme attribute, since the panel is injected into pages pp-dev doesn't own).
+const THEME_ATTR = 'data-pp-dev-theme';
+function getStoredTheme() {
+    const value = getStorageItem(STORAGE_KEYS.theme);
+    return value === 'dark' || value === 'light' ? value : 'auto';
+}
+function applyTheme(theme) {
+    if (theme === 'dark' || theme === 'light') {
+        document.documentElement.setAttribute(THEME_ATTR, theme);
+    }
+    else {
+        document.documentElement.removeAttribute(THEME_ATTR);
+    }
+}
+function setTheme(theme) {
+    setStorageItem(STORAGE_KEYS.theme, theme);
+    applyTheme(theme);
+}
+
+// Formatting helpers of the Request Inspector page: pure, so the tests import them directly.
+/** Escapes text for HTML content and double-quoted attribute values. */
+function esc(value) {
+    return String(value).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+}
+function formatBytes(bytes) {
+    const b = bytes || 0;
+    if (b < 1024) {
+        return b + ' B';
+    }
+    if (b < 1024 * 1024) {
+        return (b / 1024).toFixed(1) + ' KB';
+    }
+    if (b < 1024 * 1024 * 1024) {
+        return (b / (1024 * 1024)).toFixed(1) + ' MB';
+    }
+    return (b / (1024 * 1024 * 1024)).toFixed(2) + ' GB';
+}
+function formatDur(ms) {
+    if (ms < 1000) {
+        return ms + 'ms';
+    }
+    return (ms / 1000).toFixed(2) + 's';
+}
+const METHOD_CLASSES = {
+    GET: 'm-GET',
+    POST: 'm-POST',
+    PUT: 'm-PUT',
+    PATCH: 'm-PATCH',
+    DELETE: 'm-DELETE',
+    HEAD: 'm-HEAD',
+    OPTIONS: 'm-OPTIONS',
+};
+function methodClass(method) {
+    return METHOD_CLASSES[method] || 'm-other';
+}
+function statusClass(status) {
+    if (!status) {
+        return 's-pending';
+    }
+    return ['', '', 's-2xx', 's-3xx', 's-4xx', 's-5xx'][Math.floor(status / 100)] || '';
+}
+function sourceInfo(source) {
+    if (source === 'proxy') {
+        return { cls: 'src-proxy', title: 'Backend (live)' };
+    }
+    if (source === 'proxy-cache') {
+        return { cls: 'src-proxy-cache', title: 'Backend (cached)' };
+    }
+    return { cls: 'src-local', title: 'Local (dev server)' };
+}
+function sourceLetter(source) {
+    if (source === 'proxy') {
+        return 'P';
+    }
+    if (source === 'proxy-cache') {
+        return 'C';
+    }
+    return 'L';
+}
+const FILE_EXTENSIONS = {
+    'application/json': 'json',
+    'text/html': 'html',
+    'text/css': 'css',
+    'text/javascript': 'js',
+    'application/javascript': 'js',
+    'text/plain': 'txt',
+    'text/xml': 'xml',
+    'application/xml': 'xml',
+    'image/png': 'png',
+    'image/jpeg': 'jpg',
+    'image/gif': 'gif',
+    'image/svg+xml': 'svg',
+    'image/webp': 'webp',
+    'application/pdf': 'pdf',
+    'application/zip': 'zip',
+    'application/x-www-form-urlencoded': 'txt',
+    'application/octet-stream': 'bin',
+};
+/** The file extension a saved body of `contentType` gets. */
+function fileExt(contentType) {
+    return FILE_EXTENSIONS[(contentType || '').split(';')[0].trim().toLowerCase()] || 'bin';
+}
+function decodeBase64(b64) {
+    return Uint8Array.from(atob(b64), (c) => c.charCodeAt(0));
+}
+function decodeTextBody(b64) {
+    return new TextDecoder('utf-8').decode(decodeBase64(b64));
+}
+/** Pretty-prints JSON with highlighting spans; invalid JSON comes back as escaped plain text. */
+function syntaxHighlightJson(text) {
+    let str;
+    try {
+        str = JSON.stringify(JSON.parse(text), null, 2);
+    }
+    catch {
+        // Invalid JSON can contain arbitrary HTML. It cannot be token-highlighted safely because
+        // unmatched text is preserved by the replacement below, so render it as escaped plain text.
+        return esc(text);
+    }
+    return str.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"\s*:?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+-]?\d+)?)/g, (m) => {
+        if (/^"/.test(m)) {
+            if (/:$/.test(m)) {
+                return '<span class="body-json-key">' + esc(m) + '</span>';
+            }
+            return '<span class="body-json-str">' + esc(m) + '</span>';
+        }
+        if (/true|false/.test(m)) {
+            return '<span class="body-json-bool">' + m + '</span>';
+        }
+        if (/null/.test(m)) {
+            return '<span class="body-json-null">' + m + '</span>';
+        }
+        return '<span class="body-json-num">' + m + '</span>';
+    });
+}
+
+// HTML of the Request Inspector's list and detail. Buttons say what they do in `data-action`
+// (and which side in `data-type`); main.ts handles the clicks in one place.
+function renderListHtml(requests, selectedId) {
+    if (!requests.length) {
+        return '<div class="empty-state"><div class="empty-icon">🔍</div><div>No matching requests</div></div>';
+    }
+    return requests
+        .map((r) => {
+        const sel = r.id === selectedId ? ' selected' : '';
+        const dur = r.duration != null ? formatDur(r.duration) : '…';
+        const source = r.source || 'local';
+        return `<div class="req-item src-${source}${sel}" data-id="${esc(r.id)}">
+      <span class="method-badge ${methodClass(r.method)}">${esc(r.method)}</span>
+      ${r.user ? `<span class="user-chip" title="From the tab of user ${esc(r.user)}">${esc(r.user)}</span>` : ''}
+      <span class="req-url" title="${esc(r.url)}">${esc(r.url)}</span>
+      <span class="req-meta">
+        <span class="req-status-row">
+          <span class="source-letter src-letter-${source}">${sourceLetter(r.source)}</span>
+          <span class="status-badge ${statusClass(r.statusCode)}">${r.statusCode || '…'}</span>
+        </span>
+        <span>${dur}</span>
+        <span>${formatBytes(r.responseSize || 0)}</span>
+      </span>
+    </div>`;
+    })
+        .join('');
+}
+function renderDetailInfoHtml(e) {
+    const src = sourceInfo(e.source);
+    return `
+    <div class="info-item"><div class="info-label">Method</div><div class="info-value"><span class="method-badge ${methodClass(e.method)}">${esc(e.method)}</span></div></div>
+    <div class="info-item"><div class="info-label">Status</div><div class="info-value"><span class="status-badge ${statusClass(e.statusCode)}">${e.statusCode || '—'}</span></div></div>
+    <div class="info-item"><div class="info-label">Source</div><div class="info-value"><span class="source-chip ${src.cls}">${src.title}</span></div></div>
+    <div class="info-item"><div class="info-label">User</div><div class="info-value">${e.user ? `<span class="user-chip">${esc(e.user)}</span>` : 'Original'}</div></div>
+    <div class="info-item"><div class="info-label">Duration</div><div class="info-value">${e.duration != null ? formatDur(e.duration) : '—'}</div></div>
+    <div class="info-item"><div class="info-label">Request</div><div class="info-value">${formatBytes(e.requestBodySize || 0)}</div></div>
+    <div class="info-item"><div class="info-label">Response</div><div class="info-value">${formatBytes(e.responseBodySize || 0)}</div></div>
+    <div class="info-item"><div class="info-label">Time</div><div class="info-value" style="font-size:11px">${new Date(e.timestamp).toLocaleTimeString()}</div></div>
+  `;
+}
+function renderDetailUrlHtml(e) {
+    return `<span class="info-url-text" title="${esc(e.url)}">${esc(e.url)}</span><button class="section-btn" data-action="copy-url">Copy link</button>`;
+}
+function sectionHtml(title, badge, actions, body) {
+    return `<div class="detail-section">
+    <div class="detail-section-hdr" data-action="toggle-section">
+      <span class="toggle">▾</span>
+      <span class="section-title">${title}</span>
+      ${badge}
+      ${actions ? `<div class="section-actions">${actions}</div>` : ''}
+    </div>
+    <div class="detail-section-body">${body}</div>
+  </div>`;
+}
+function renderHeadersSectionHtml(title, headers, type) {
+    const entries = Object.entries(headers || {}).filter(([, v]) => v != null);
+    const rows = entries
+        .map(([k, v]) => `<tr><td>${esc(k)}</td><td>${esc(Array.isArray(v) ? v.join(', ') : String(v))}</td></tr>`)
+        .join('');
+    const copy = entries.length
+        ? `<button class="section-btn" data-action="copy-headers" data-type="${type}">Copy</button>`
+        : '';
+    return sectionHtml(title, `<span class="section-badge">${entries.length}</span>`, copy, `<table class="kv-table">${rows}</table>`);
+}
+/**
+ * A body shown and copied as text: JSON, script, XML (an SVG among them) and text/* types. XML
+ * is `application/xml` or a `+xml` suffix: the Office types (`application/vnd.openxmlformats-…`)
+ * name XML too, and are ZIP archives.
+ */
+function isTextType(ct) {
+    return (ct.includes('json') ||
+        ct.startsWith('text/') ||
+        ct.includes('/javascript') ||
+        ct === 'application/xml' ||
+        ct.endsWith('+xml') ||
+        ct === 'application/x-www-form-urlencoded');
+}
+function bodyContentHtml(b64, ct, truncated, size) {
+    if (!b64 && !truncated) {
+        return '<div class="body-binary">No body</div>';
+    }
+    if (truncated) {
+        return `<div class="body-binary">Body too large to capture (${formatBytes(size)})</div>`;
+    }
+    if (ct.includes('json') || ct.includes('/javascript') || ct === 'text/plain') {
+        const text = decodeTextBody(b64);
+        return ct.includes('json')
+            ? `<pre class="body-content json">${syntaxHighlightJson(text)}</pre>`
+            : `<pre class="body-content">${esc(text)}</pre>`;
+    }
+    if (ct.startsWith('image/') && size < 1024 * 1024) {
+        return `<img class="body-image" src="data:${esc(ct)};base64,${b64}" alt="image"/>`;
+    }
+    if (ct === 'application/x-www-form-urlencoded') {
+        const params = new URLSearchParams(decodeTextBody(b64));
+        const rows = [...params.entries()].map(([k, v]) => `<tr><td>${esc(k)}</td><td>${esc(v)}</td></tr>`).join('');
+        return `<table class="kv-table">${rows}</table>`;
+    }
+    // XML was offered for copying as text, and shown as "Binary data".
+    if (isTextType(ct)) {
+        return `<pre class="body-content">${esc(decodeTextBody(b64))}</pre>`;
+    }
+    return `<div class="body-binary">Binary data — ${formatBytes(size)} (${esc(ct || 'unknown type')})</div>`;
+}
+function renderBodySectionHtml(title, b64, contentType, truncated, size, type, captureLimit) {
+    const ct = (contentType || '').toLowerCase().split(';')[0].trim();
+    const copy = b64 && isTextType(ct)
+        ? `<button class="section-btn" data-action="copy-body" data-type="${type}">Copy</button>`
+        : '';
+    const save = b64 ? `<button class="section-btn" data-action="save-body" data-type="${type}">Save</button>` : '';
+    const note = truncated
+        ? `<div class="truncated-note">⚠ Body was larger than the capture limit (${formatBytes(captureLimit)})</div>`
+        : '';
+    return sectionHtml(title, size ? `<span class="section-badge">${formatBytes(size)}</span>` : '', copy + save, bodyContentHtml(b64, ct, truncated, size) + note);
+}
+function renderDetailSectionsHtml(e, captureLimit) {
+    return [
+        renderHeadersSectionHtml('Request Headers', e.requestHeaders, 'request'),
+        renderBodySectionHtml('Request Body', e.requestBody, e.requestContentType, e.requestBodyTruncated, e.requestBodySize, 'request', captureLimit),
+        renderHeadersSectionHtml('Response Headers', e.responseHeaders, 'response'),
+        renderBodySectionHtml('Response Body', e.responseBody, e.responseContentType, e.responseBodyTruncated, e.responseBodySize, 'response', captureLimit),
+    ].join('');
+}
+
+// The Request Inspector page (`/@pp-dev/inspector`): lists what went through the dev server and
+// shows a request's headers and bodies. main.ts starts it on request-inspector.html.
+/** Value of the user filter for requests sent as the original user (a saved user's name can't start with "@"). */
+const ORIGINAL_USER = '@original';
+const DEFAULT_CAPTURE_LIMIT = 10 * 1024 * 1024;
+/** Starts the page on the current document; returns a function that stops it (polling and listeners). */
+function startInspector({ pollIntervalMs = 2000 } = {}) {
+    const byId = (id) => document.getElementById(id);
+    const captureLimit = Number(document.body.dataset.captureLimit) || DEFAULT_CAPTURE_LIMIT;
+    const listEl = byId('req-list');
+    const detailEmpty = byId('detail-empty');
+    const detailPanel = byId('detail-panel');
+    const detailInfo = byId('detail-info');
+    const detailUrl = byId('detail-url');
+    const detailScroll = byId('detail-scroll');
+    const filterBar = byId('filter-bar');
+    const searchInput = byId('search-input');
+    const methodSelect = byId('method-select');
+    const statusSelect = byId('status-select');
+    const sourceSelect = byId('source-select');
+    const userSelect = byId('user-select');
+    const themeSwitch = byId('theme-switch');
+    let allRequests = [];
+    let filteredRequests = [];
+    let selectedId = null;
+    let currentEntry = null;
+    // ── Theme (Auto/Dark/Light) ────────────────────────────────────────────────
+    // The page's <head> already set the stored theme before first paint; this keeps the buttons in
+    // step. Shared with the dev panel and the Variables Editor (see ../theme.ts).
+    const showTheme = (theme) => {
+        applyTheme(theme);
+        for (const button of Array.from(themeSwitch.children)) {
+            const isActive = button.dataset.themeChoice === theme;
+            button.classList.toggle('active', isActive);
+            button.setAttribute('aria-pressed', String(isActive));
+        }
+    };
+    // ── List ───────────────────────────────────────────────────────────────────
+    const updateStats = (data) => {
+        const pct = data.maxMemory > 0 ? Math.min(100, (data.memoryUsage / data.maxMemory) * 100) : 0;
+        byId('req-count').textContent = data.total + ' request' + (data.total !== 1 ? 's' : '');
+        byId('mem-fill').style.width = pct + '%';
+        byId('mem-text').textContent = formatBytes(data.memoryUsage) + ' / ' + formatBytes(data.maxMemory);
+    };
+    // The user filter only shows up once a request was sent as a saved user.
+    const updateUserOptions = () => {
+        const names = Array.from(new Set(allRequests.map((r) => r.user).filter((u) => Boolean(u)))).sort();
+        const current = userSelect.value;
+        userSelect.style.display = names.length ? '' : 'none';
+        userSelect.replaceChildren(new Option('All users', ''), new Option('Original', ORIGINAL_USER), ...names.map((name) => new Option(name, name)));
+        userSelect.value = current === ORIGINAL_USER || names.includes(current) ? current : '';
+    };
+    const renderList = () => {
+        const atBottom = listEl.scrollTop + listEl.clientHeight >= listEl.scrollHeight - 16;
+        listEl.innerHTML = renderListHtml(filteredRequests, selectedId);
+        if (atBottom && filteredRequests.length) {
+            listEl.scrollTop = listEl.scrollHeight;
+        }
+    };
+    const applyFilter = () => {
+        const search = searchInput.value.toLowerCase();
+        const method = methodSelect.value;
+        const status = statusSelect.value;
+        const source = sourceSelect.value;
+        const user = userSelect.value;
+        filteredRequests = allRequests.filter((r) => !(user && (r.user || ORIGINAL_USER) !== user) &&
+            !(method && r.method !== method) &&
+            !(status && !String(r.statusCode || '').startsWith(status)) &&
+            !(source && r.source !== source) &&
+            !(search && !r.url.toLowerCase().includes(search)));
+        renderList();
+    };
+    const showDetailEmpty = () => {
+        detailPanel.style.display = 'none';
+        detailEmpty.style.display = 'flex';
+    };
+    const fetchList = async () => {
+        try {
+            const data = (await (await fetch('/@api/requests')).json());
+            allRequests = data.requests || [];
+            updateStats(data);
+            updateUserOptions();
+            applyFilter();
+            if (selectedId && !allRequests.find((r) => r.id === selectedId)) {
+                selectedId = null;
+                showDetailEmpty();
+            }
+        }
+        catch {
+            // The dev server is restarting; the next poll tries again.
+        }
+    };
+    // ── Detail ─────────────────────────────────────────────────────────────────
+    const selectRequest = async (id) => {
+        selectedId = id;
+        renderList();
+        detailEmpty.style.display = 'none';
+        detailPanel.style.display = 'flex';
+        detailPanel.style.flexDirection = 'column';
+        detailPanel.style.overflow = 'hidden';
+        detailScroll.innerHTML = '<div style="padding:20px;color:var(--text3)">Loading…</div>';
+        try {
+            const response = await fetch('/@api/requests/' + encodeURIComponent(id));
+            // Another row was clicked meanwhile: this answer, arriving last, was shown under the other
+            // row's highlight, and Copy/Save acted on it.
+            if (selectedId !== id) {
+                return;
+            }
+            if (!response.ok) {
+                showDetailEmpty();
+                return;
+            }
+            const loaded = (await response.json());
+            if (selectedId !== id) {
+                return;
+            }
+            currentEntry = loaded;
+            detailInfo.innerHTML = renderDetailInfoHtml(currentEntry);
+            detailUrl.innerHTML = renderDetailUrlHtml(currentEntry);
+            detailScroll.innerHTML = renderDetailSectionsHtml(currentEntry, captureLimit);
+        }
+        catch {
+            if (selectedId === id) {
+                showDetailEmpty();
+            }
+        }
+    };
+    const toggleSection = (header) => {
+        const body = header.nextElementSibling;
+        const toggle = header.querySelector('.toggle');
+        if (body && toggle) {
+            toggle.textContent = body.classList.toggle('collapsed') ? '▸' : '▾';
+        }
+    };
+    const clearAll = async () => {
+        await fetch('/@api/requests', { method: 'DELETE' });
+        allRequests = [];
+        filteredRequests = [];
+        selectedId = null;
+        showDetailEmpty();
+        renderList();
+        updateStats({ total: 0, memoryUsage: 0, maxMemory: 1024 * 1024 * 1024 });
+    };
+    // ── Copy / Save ────────────────────────────────────────────────────────────
+    const clipboard = (text, button) => {
+        navigator.clipboard
+            .writeText(text)
+            .then(() => {
+            const label = button.textContent;
+            button.textContent = '✓';
+            button.style.color = 'var(--green)';
+            setTimeout(() => {
+                button.textContent = label;
+                button.style.color = '';
+            }, 1500);
+        })
+            .catch(() => { });
+    };
+    const copyHeaders = (type, button) => {
+        const headers = type === 'request' ? currentEntry?.requestHeaders : currentEntry?.responseHeaders;
+        if (!headers) {
+            return;
+        }
+        const text = Object.entries(headers)
+            .filter(([, v]) => v != null)
+            .map(([k, v]) => k + ': ' + (Array.isArray(v) ? v.join(', ') : String(v)))
+            .join('\n');
+        clipboard(text, button);
+    };
+    const bodyOf = (type) => (type === 'request' ? currentEntry?.requestBody : currentEntry?.responseBody);
+    const copyBody = (type, button) => {
+        const b64 = bodyOf(type);
+        if (!b64) {
+            return;
+        }
+        try {
+            clipboard(decodeTextBody(b64), button);
+        }
+        catch {
+            // Not text after all.
+        }
+    };
+    const saveBody = (type) => {
+        const b64 = bodyOf(type);
+        const contentType = type === 'request' ? currentEntry?.requestContentType : currentEntry?.responseContentType;
+        if (!b64) {
+            return;
+        }
+        try {
+            const url = URL.createObjectURL(new Blob([decodeBase64(b64)]));
+            const link = document.createElement('a');
+            link.href = url;
+            link.download = type + '-body.' + fileExt(contentType);
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+            setTimeout(() => URL.revokeObjectURL(url), 1000);
+        }
+        catch {
+            // Not valid base64.
+        }
+    };
+    // ── Events ─────────────────────────────────────────────────────────────────
+    // One handler for the whole page: list items carry `data-id`, buttons `data-action` (and
+    // `data-type` for request/response), the theme buttons `data-theme-choice`.
+    const onClick = (event) => {
+        const target = event.target;
+        const themeButton = target.closest('[data-theme-choice]');
+        if (themeButton) {
+            const theme = themeButton.dataset.themeChoice;
+            setTheme(theme);
+            showTheme(theme);
+            return;
+        }
+        const actionEl = target.closest('[data-action]');
+        const type = actionEl?.dataset.type;
+        switch (actionEl?.dataset.action) {
+            case 'clear':
+                void clearAll();
+                return;
+            case 'copy-url':
+                clipboard(currentEntry?.url ?? '', actionEl);
+                return;
+            case 'copy-headers':
+                copyHeaders(type, actionEl);
+                return;
+            case 'copy-body':
+                copyBody(type, actionEl);
+                return;
+            case 'save-body':
+                saveBody(type);
+                return;
+            case 'toggle-section':
+                toggleSection(actionEl);
+                return;
+        }
+        const item = target.closest('.req-item');
+        if (item?.dataset.id) {
+            void selectRequest(item.dataset.id);
+        }
+    };
+    document.addEventListener('click', onClick);
+    filterBar.addEventListener('input', applyFilter);
+    filterBar.addEventListener('change', applyFilter);
+    showTheme(getStoredTheme());
+    void fetchList();
+    const poll = setInterval(() => void fetchList(), pollIntervalMs);
+    return () => {
+        clearInterval(poll);
+        document.removeEventListener('click', onClick);
+        filterBar.removeEventListener('input', applyFilter);
+        filterBar.removeEventListener('change', applyFilter);
+    };
+}
+
+// Entry of the Request Inspector bundle: its styles and page, built next to it in dist/client.
+startInspector();
+//# sourceMappingURL=request-inspector.js.map