shokupan 0.11.0 → 0.12.0

package/dist/plugins/application/dashboard/static/requests.js

@@ -7,6 +7,23 @@ window.requestsTable = null;
 let filterText = '';
 let filterType = 'all';
 let filterDirection = 'all';
+let filterIgnore = true;
+let ignoreRegexes = [];
+
+function globToRegex(pattern) {
+    // Escape special regex chars except *
+    let escaped = pattern.replace(/[.+?^${}()|[\]\\]/g, '\\$&');
+    // Convert * to .*
+    // For ** support, we can just treat * as .* for now, or distinguish.
+    // Simple approach: replace * with .*
+    // Note: This is a loose approximation of glob
+    const re = escaped.replace(/\*/g, '.*');
+    return new RegExp(`^${re}$`);
+}
+
+// Waterfall State
+let minRequestTime = Infinity;
+let maxRequestTime = 0;
 
 function initRequests() {
     console.log('[requests.js] Initializing...');
@@ -14,8 +31,14 @@ function initRequests() {
     // Initialize Filter Listeners
     const txtFilter = document.getElementById('network-filter-text');
     const typeFilter = document.getElementById('network-filter-type');
+    const ignoreFilter = document.getElementById('network-filter-ignore');
     const directionButtons = document.querySelectorAll('.filter-direction');
 
+    // Compile regexes
+    if (window.SHOKUPAN_CONFIG && window.SHOKUPAN_CONFIG.ignorePaths) {
+        ignoreRegexes = window.SHOKUPAN_CONFIG.ignorePaths.map(globToRegex);
+    }
+
     if (directionButtons) {
         directionButtons.forEach(btn => {
             btn.onclick = () => {
@@ -49,160 +72,301 @@ function initRequests() {
         });
     }
 
+    if (ignoreFilter) {
+        // specific listener
+        ignoreFilter.addEventListener('change', (e) => {
+            filterIgnore = e.target.checked;
+            window.requestsTable.setFilter(customFilter);
+        });
+        filterIgnore = ignoreFilter.checked;
+    }
+
     // specific check for Tabulator
     if (typeof Tabulator === 'undefined') {
         console.error('Tabulator is not defined. Ensure it is loaded before requests.js');
         return;
     }
 
+    // Load saved column state
+    let savedColumns = {};
+    try {
+        const stored = localStorage.getItem('shokupan_dashboard_columns');
+        if (stored) savedColumns = JSON.parse(stored);
+    } catch (e) {
+        console.error("Failed to load column state", e);
+    }
+
+    function saveColumnState() {
+        if (!window.requestsTable) return;
+        const cols = window.requestsTable.getColumns();
+        const state = {};
+        cols.forEach(c => {
+            state[c.getField()] = c.isVisible();
+        });
+        localStorage.setItem('shokupan_dashboard_columns', JSON.stringify(state));
+    }
+
+    const headerMenu = [
+        {
+            label: "Hide Column",
+            action: function (e, column) {
+                column.hide();
+                saveColumnState();
+            }
+        },
+        {
+            separator: true,
+        },
+        {
+            label: "Select Columns",
+            menu: []
+        }
+    ];
+
+    const columns = [
+        {
+            title: "Status",
+            field: "status",
+            width: 100,
+            visible: savedColumns['status'] !== undefined ? savedColumns['status'] : true,
+            formatter: function (cell) {
+                const status = cell.getValue();
+                if (!status) return '<span style="color: var(--text-secondary)">Pending</span>';
+                const color = status >= 500 ? '#ef4444' : status >= 400 ? '#f59e0b' : '#10b981';
+                return `<span style="display: inline-block; width: 10px; height: 10px; background: ${color}; border-radius: 50%; margin-right: 6px;"></span>${status}`;
+            },
+            headerContextMenu: headerMenu
+        },
+        {
+            title: "Method",
+            field: "method",
+            width: 90,
+            headerSort: false,
+            visible: savedColumns['method'] !== undefined ? savedColumns['method'] : true,
+            headerContextMenu: headerMenu
+        },
+        {
+            title: "Name",
+            field: "url",
+            widthGrow: 2, // Take up more space
+            visible: savedColumns['url'] !== undefined ? savedColumns['url'] : true,
+            formatter: function (cell) {
+                const url = cell.getValue();
+                // Extract name from URL
+                let name = url;
+                try {
+                    const u = new URL(url, 'http://localhost');
+                    name = u.pathname;
+                    if (name === '/') name = 'localhost';
+                    const parts = name.split('/');
+                    const last = parts[parts.length - 1];
+                    if (last) name = last;
+                } catch (e) { }
+
+                return `<div style="display: flex; flex-direction: column; line-height: 1.2;">
+                        <span style="color: var(--text-secondary);">${name}</span>
+                    </div>`;
+            },
+            headerContextMenu: headerMenu
+        },
+        {
+            title: "Domain",
+            field: "domain",
+            width: 80,
+            visible: savedColumns['domain'] !== undefined ? savedColumns['domain'] : false,
+            headerContextMenu: headerMenu
+        },
+        {
+            title: "Path",
+            field: "path",
+            width: 80,
+            visible: savedColumns['path'] !== undefined ? savedColumns['path'] : true,
+            headerContextMenu: headerMenu
+        },
+        {
+            title: "URL",
+            field: "url",
+            width: 80,
+            visible: savedColumns['url'] !== undefined ? savedColumns['url'] : false,
+            headerContextMenu: headerMenu
+        },
+        {
+            title: "Protocol",
+            field: "protocol",
+            width: 80,
+            visible: savedColumns['protocol'] !== undefined ? savedColumns['protocol'] : false,
+            formatter: function (cell) {
+                const row = cell.getData();
+                // Prefer explicit protocol version (e.g. 1.1, h2) if available
+                if (row.protocol && row.protocol !== 'http' && row.protocol !== 'https') return row.protocol;
+                return row.scheme || row.protocol || '-';
+            },
+            headerContextMenu: headerMenu
+        },
+        {
+            title: "Scheme",
+            field: "scheme",
+            width: 80,
+            visible: savedColumns['scheme'] !== undefined ? savedColumns['scheme'] : false,
+            headerContextMenu: headerMenu
+        },
+        {
+            title: "Remote IP",
+            field: "remoteIP",
+            width: 80,
+            visible: savedColumns['remoteIP'] !== undefined ? savedColumns['remoteIP'] : true,
+            headerContextMenu: headerMenu
+        },
+        {
+            title: "Initiator",
+            field: "direction",
+            width: 80,
+            visible: savedColumns['direction'] !== undefined ? savedColumns['direction'] : false,
+            formatter: (cell) => {
+                const dir = cell.getValue();
+                return dir === 'outbound' ? 'Server' : 'Client';
+            },
+            headerContextMenu: headerMenu
+        },
+        {
+            title: "Type",
+            field: "type",
+            width: 80,
+            visible: savedColumns['type'] !== undefined ? savedColumns['type'] : false,
+            formatter: (cell) => {
+                const r = cell.getData();
+                if (r.type === 'fetch') return 'fetch';
+                if (r.type === 'xhr') return 'xhr';
+                if (r.type === 'ws') return 'ws';
+                return r.contentType || 'document';
+            },
+            headerContextMenu: headerMenu
+        },
+        {
+            title: "Cookies",
+            field: "cookies",
+            width: 80,
+            visible: savedColumns['cookies'] !== undefined ? savedColumns['cookies'] : false,
+            headerContextMenu: headerMenu
+        },
+        {
+            title: "Transferred",
+            field: "transferred",
+            width: 80,
+            visible: savedColumns['transferred'] !== undefined ? savedColumns['transferred'] : false,
+            headerContextMenu: headerMenu
+        },
+        {
+            title: "Size",
+            field: "size",
+            width: 110,
+            visible: savedColumns['size'] !== undefined ? savedColumns['size'] : true,
+            formatter: (cell) => formatBytes(cell.getValue()),
+            headerContextMenu: headerMenu
+        },
+        {
+            title: "Time",
+            field: "duration",
+            width: 90,
+            visible: savedColumns['duration'] !== undefined ? savedColumns['duration'] : true,
+            formatter: (cell) => cell.getValue() ? Math.round(cell.getValue()) + ' ms' : 'Pending',
+            headerContextMenu: headerMenu
+        },
+        {
+            title: "Waterfall",
+            field: "timestamp",
+            widthGrow: 1,
+            visible: savedColumns['timestamp'] !== undefined ? savedColumns['timestamp'] : true,
+            formatter: waterfallFormatter,
+            headerSort: true,
+            headerContextMenu: headerMenu
+        }
+    ];
+
+    const checkMark = `<svg fill="currentColor" width="16px" height="16px" style="padding: 2px; margin-right: 2px" viewBox="0 0 1024 1024"><path d="M351.605 663.268l481.761-481.761c28.677-28.677 75.171-28.677 103.847 0s28.677 75.171 0 103.847L455.452 767.115l.539.539-58.592 58.592c-24.994 24.994-65.516 24.994-90.51 0L85.507 604.864c-28.677-28.677-28.677-75.171 0-103.847s75.171-28.677 103.847 0l162.25 162.25z"/></svg>`;
+    const uncheckMark = `<span style="width: 18px; display: inline-block"></span>`;
+
+    const subMenu = [];
+    columns.forEach((col, idx) => {
+        subMenu.push({
+            label: (col.visible ? checkMark : uncheckMark) + " " + col.title,
+            action: function (e) {
+                // const cols = window.requestsTable.getColumns();
+                // cols.forEach((c, i) => {
+                //     if (idx === i) c.toggle();
+                // });
+                columns[idx].visible = !columns[idx].visible;
+                subMenu[idx].label = (columns[idx].visible ? checkMark : uncheckMark) + " " + columns[idx].title;
+                if (window.requestsTable) {
+                    window.requestsTable.redraw();
+                    window.requestsTable.setColumns(columns);
+                    saveColumnState();
+                };
+            }
+        });
+    });
+    headerMenu[2].menu = subMenu;
+
     window.requestsTable = new Tabulator("#requests-list-container", {
         layout: "fitColumns",
-        placeholder: "No requests found",
-        selectable: 1,
+        responsiveLayout: true,
+        resizableColumnGuide: true,
         resizableColumnFit: true,
+        placeholder: "No requests found",
+        selectableRows: 1,
         height: "100%", // Fill container
         index: "id",
         rowHeight: 32, // Dense rows
         initialSort: [
             { column: "timestamp", dir: "desc" }
         ],
-        columns: [
-            {
-                title: "Status",
-                field: "status",
-                width: 80,
-                formatter: function (cell) {
-                    const status = cell.getValue();
-                    if (!status) return '<span style="color: var(--text-secondary)">Pending</span>';
-                    const color = status >= 500 ? '#ef4444' : status >= 400 ? '#f59e0b' : '#10b981';
-                    return `<span style="display: inline-block; width: 10px; height: 10px; background: ${color}; border-radius: 50%; margin-right: 6px;"></span>${status}`;
-                }
-            },
-            {
-                title: "Method",
-                field: "method",
-                width: 80,
-                visible: true
-            },
-            {
-                title: "Name",
-                field: "url",
-                widthGrow: 2, // Take up more space
-                formatter: function (cell) {
-                    const url = cell.getValue();
-                    // Extract name from URL
-                    let name = url;
-                    try {
-                        const u = new URL(url, 'http://localhost');
-                        name = u.pathname;
-                        if (name === '/') name = 'localhost';
-                        const parts = name.split('/');
-                        const last = parts[parts.length - 1];
-                        if (last) name = last;
-                    } catch (e) { }
-
-                    return `<div style="display: flex; flex-direction: column; line-height: 1.2;">
-                        <span style="color: var(--text-secondary);">${name}</span>
-                    </div>`;
-                }
-            },
-            {
-                title: "Domain",
-                field: "domain",
-                width: 80,
-                visible: true
-            },
-            {
-                title: "Path",
-                field: "path",
-                width: 80,
-                visible: true
-            },
-            {
-                title: "URL",
-                field: "url",
-                width: 80,
-                visible: true
-            },
-            {
-                title: "Protocol",
-                field: "protocol",
-                width: 80,
-                visible: true,
-                formatter: function (cell) {
-                    const row = cell.getData();
-                    // Prefer explicit protocol version (e.g. 1.1, h2) if available
-                    if (row.protocol && row.protocol !== 'http' && row.protocol !== 'https') return row.protocol;
-                    return row.scheme || row.protocol || '-';
-                }
-            },
-            {
-                title: "Scheme",
-                field: "scheme",
-                width: 80,
-                visible: true
-            },
-            {
-                title: "Remote IP",
-                field: "remoteIP",
-                width: 80,
-                visible: true
-            },
-            {
-                title: "Initiator",
-                field: "direction",
-                width: 80,
-                formatter: (cell) => {
-                    const dir = cell.getValue();
-                    return dir === 'outbound' ? 'Server' : 'Client';
-                }
-            },
+        columns: columns,
+        data: [],
+        rowContextMenu: [
             {
-                title: "Type",
-                field: "type",
-                width: 80,
-                formatter: (cell) => {
-                    const r = cell.getData();
-                    if (r.type === 'fetch') return 'fetch';
-                    if (r.type === 'xhr') return 'xhr';
-                    if (r.type === 'ws') return 'ws';
-                    return r.contentType || 'document';
+                label: "Replay Request",
+                action: function (e, row) {
+                    const data = row.getData();
+                    const basePath = window.location.pathname.endsWith('/') ? window.location.pathname.slice(0, -1) : window.location.pathname;
+
+                    // Determine direction if not explicit
+                    const direction = data.direction || 'inbound';
+
+                    fetch(basePath + '/replay', {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({
+                            method: data.method,
+                            url: data.url,
+                            headers: data.requestHeaders,
+                            body: data.requestBody,
+                            direction: direction
+                        })
+                    })
+                        .then(res => res.json())
+                        .then(result => {
+                            if (result.error) {
+                                alert('Replay Failed: ' + result.error);
+                            } else {
+                                // Show result in a simplified details view or just alert success?
+                                // User requirement: "presents the response data to the user"
+                                // Let's create a temporary object mimicking a request log and show it in details view
+                                const replayLog = {
+                                    ...data,
+                                    id: 'replay-' + Date.now(),
+                                    status: result.status,
+                                    duration: result.duration || 0,
+                                    timestamp: Date.now(),
+                                    responseHeaders: result.headers,
+                                    responseBody: result.data,
+                                    size: result.data ? result.data.length : 0
+                                };
+                                showRequestDetails(replayLog);
+                            }
+                        })
+                        .catch(err => console.error("Replay fetch failed", err));
                 }
             },
-            {
-                title: "Cookies",
-                field: "cookies",
-                width: 80,
-                visible: true
-            },
-            {
-                title: "Transferred",
-                field: "transferred",
-                width: 80,
-                visible: true
-            },
-            {
-                title: "Size",
-                field: "size",
-                width: 80,
-                formatter: (cell) => formatBytes(cell.getValue())
-            },
-            {
-                title: "Time",
-                field: "duration",
-                width: 80,
-                formatter: (cell) => cell.getValue() ? Math.round(cell.getValue()) + ' ms' : 'Pending'
-            },
-            {
-                title: "Waterfall",
-                field: "timestamp",
-                widthGrow: 1,
-                formatter: waterfallFormatter,
-                headerSort: false
-            }
-        ],
-        data: [],
-        rowContextMenu: [
             {
                 label: "Copy as fetch",
                 action: function (e, row) {
@@ -245,7 +409,7 @@ function initRequests() {
 function initResizeHandle() {
     const handle = document.getElementById('details-drag-handle');
     const container = document.getElementById('request-details-container');
-    const listContainer = document.getElementById('requests-list-container');
+
     if (!handle || !container) return;
 
     let isResizing = false;
@@ -412,6 +576,20 @@ function customFilter(data) {
         if (filterDirection !== dir) return false;
     }
 
+    // Ignore Filter
+    if (filterIgnore && ignoreRegexes.length > 0) {
+        // check against regexes
+        // We match against URL or Path?
+        // Usually path.
+        // data.url might be full URL. data.path is path.
+        const path = data.path || data.url; // Fallback
+        // Also check full URL just in case glob is absolute?
+        // Let's assume glob matches against path.
+        for (const re of ignoreRegexes) {
+            if (re.test(path)) return false;
+        }
+    }
+
     // Text Filter (Regex-ish)
     if (filterText) {
         const text = (data.url + ' ' + data.method).toLowerCase();
@@ -423,27 +601,96 @@ function customFilter(data) {
 
 function waterfallFormatter(cell) {
     const data = cell.getData();
-    // We need a reference start time for the waterfall.
-    // For now, let's use the oldest timestamp in the current page/view or relative to 10 seconds ago?
-    // A better approach for "live" view is to just show bar width proportional to duration? 
-    // Or relative to the start of the trace session. 
+    // Default to duration bar if no range yet
+    const duration = data.duration || 0;
+
+    // Safety check
+    if (minRequestTime === Infinity || maxRequestTime === 0) {
+        // Just show a simple bar based on some 2s default
+        const pct = Math.min(100, (duration / 2000) * 100);
+        const color = duration > 1000 ? '#ef4444' : duration > 500 ? '#f59e0b' : '#3b82f6';
+        return `<div style="width: 100%; height: 100%; display: flex; align-items: center;">
+            <div style="height: calc(100% - 4px); width: ${pct}%; background: ${color}; border-radius: 3px; min-width: 2px;"></div>
+        </div>`;
+    }
 
-    // Simpler: Show duration bar relative to a fixed max (e.g. 1s or 5s).
-    // Or just a simple bar representing execution time.
+    const totalRange = maxRequestTime - minRequestTime;
+    // Prevent divide by zero
+    const safeRange = totalRange <= 0 ? 1 : totalRange;
 
-    // Let's do a "Time/Duration" visual.
-    const duration = data.duration || 0;
-    const maxDuration = 2000; // 2s baseline for full width
-    const pct = Math.min(100, (duration / maxDuration) * 100);
+    // Calculate start offset relative to minRequestTime
+    // We treat minRequestTime as 0%
+    // If a request started before minRequestTime (unlikely given logic), clamp to 0
+    const startTimeResult = data.timestamp - minRequestTime;
+    const startPct = Math.max(0, (startTimeResult / safeRange) * 100);
+
+    // Calculate width relative to totalRange
+    // Use a min width of 0.5% so it's visible
+    const widthPct = Math.max(0.5, (duration / safeRange) * 100);
 
-    // Color based on duration
+    // Color
     const color = duration > 1000 ? '#ef4444' : duration > 500 ? '#f59e0b' : '#3b82f6';
 
-    return `<div style="width: 100%; height: 100%; display: flex; align-items: center;">
-        <div style="height: 6px; width: ${pct}%; background: ${color}; border-radius: 3px; min-width: 2px;"></div>
+    return `<div style="width: 100%; height: 100%; display: flex; align-items: center; position: relative;">
+        <div style="
+            position: absolute;
+            left: min(${startPct}%, calc(100% - 2px));
+            width: ${widthPct}%;
+            height: calc(100% - 4px); 
+            background: ${color}; 
+            border-radius: 3px; 
+            min-width: 2px;
+        " title="Start: +${Math.round(startTimeResult)}ms, Duration: ${Math.round(duration)}ms"></div>
     </div>`;
 }
 
+// Utility to track time range
+function updateTimestamps(requests) {
+    if (!requests || !requests.length) return;
+    let changed = false;
+    requests.forEach(r => {
+        const start = r.timestamp;
+        const end = start + (r.duration || 0);
+        if (start < minRequestTime) {
+            minRequestTime = start;
+            changed = true;
+        }
+        // Also extend max if needed, but generally max is max(end)
+        // However, waterfall usually shows relative to session start.
+        // If we want "waterfall of current view", we care about min/max of visible.
+        // But for simplicity, we track global session range.
+        if (end > maxRequestTime) {
+            maxRequestTime = end;
+            changed = true;
+        }
+        // Also handle if start > maxRequestTime (e.g. first request)
+        if (start > maxRequestTime) {
+            maxRequestTime = end; // start + duration
+            changed = true;
+        }
+    });
+    return changed;
+}
+
+// Global handler for Client.js
+window.updateRequestsList = function (newRequests) {
+    if (!window.requestsTable || !newRequests || !newRequests.length) return;
+
+    // Update Timestamps
+    const changed = updateTimestamps(newRequests);
+
+    // Add or Update data (true = add to top if new)
+    // using updateOrAddData to be safe if IDs exist
+    window.requestsTable.updateOrAddData(newRequests)
+        .then(() => {
+            // If range expanded significantly, or just always for safety to update relative bars
+            if (changed) {
+                // redraw(true) forces full re-render of rows
+                window.requestsTable.redraw(true);
+            }
+        });
+};
+
 
 
 function fetchRequests() {
@@ -455,7 +702,13 @@ function fetchRequests() {
         .then(res => res.json())
         .then(data => {
             if (window.requestsTable) {
-                window.requestsTable.setData(data.requests || []);
+                const reqs = data.requests || [];
+                // Reset timestamps on full load/reload
+                minRequestTime = Infinity;
+                maxRequestTime = 0;
+                updateTimestamps(reqs);
+
+                window.requestsTable.setData(reqs);
                 window.requestsTable.setFilter(customFilter);
             }
         })
@@ -470,7 +723,7 @@ function showRequestDetails(request) {
     const container = document.getElementById('request-details-container');
     const content = document.getElementById('request-details-content');
 
-    container.style.display = 'block';
+    container.style.display = 'flex';
     if (window.requestsTable) window.requestsTable.redraw();
 
     // Tab Headers
@@ -491,7 +744,7 @@ function showRequestDetails(request) {
 
     function renderTabs() {
         return `
-            <div class="tabs-header" style="display: flex; border-bottom: 1px solid var(--border-color); margin-bottom: 1rem;">
+            <div class="tabs-header" style="display: flex; border-bottom: 1px solid var(--border-color)">
                 ${tabs.map(tab => `
                     <div class="tab-item ${tab.id === activeTab ? 'active' : ''}" 
                          data-tab="${tab.id}"
@@ -500,7 +753,7 @@ function showRequestDetails(request) {
                     </div>
                 `).join('')}
             </div>
-            <div id="tab-content" style="flex: 1; overflow-y: auto; display: flex; flex-direction: column;">
+            <div id="tab-content" style="flex: 1; overflow-y: auto; display: flex; flex-direction: column; padding: 1rem">
                 ${renderTabContent(activeTab, request)}
             </div>
         `;
@@ -516,13 +769,30 @@ function showRequestDetails(request) {
             if (newTab !== activeTab) {
                 activeTab = newTab;
                 content.innerHTML = renderTabs();
+                document.querySelector("#tab-content").style.padding = "1rem";
+
+                if (activeTab === "timings") {
+                    const traceContainer = document.getElementById('middleware-trace-container');
+                    renderTrace(request, traceContainer);
+                }
+
                 // Re-initialize editors if needed
-                if (activeTab === 'response') initResponseEditor(request);
-                if (activeTab === 'request') initRequestEditor(request);
+                if (activeTab === 'response') {
+                    document.querySelector("#tab-content").style.padding = "0";
+                    initResponseEditor(request);
+                };
+                if (activeTab === 'request') {
+                    document.querySelector("#tab-content").style.padding = "0";
+                    initRequestEditor(request);
+                };
             }
         }
     };
 
+    if (activeTab === "timings") {
+        const traceContainer = document.getElementById('middleware-trace-container');
+        renderTrace(request, traceContainer);
+    }
     // Initial Editor Load
     if (activeTab === 'response') initResponseEditor(request);
 }
@@ -546,12 +816,34 @@ function renderTabContent(tabId, request) {
     }
 }
 
+function renderNameValueTable(items, emptyMessage = 'No items found') {
+    if (!items || !items.length) return `<div style="padding: 8px; color: var(--text-secondary);">${emptyMessage}</div>`;
+    return `
+        <table style="width: 100%; text-align: left; border-collapse: collapse; font-size: 0.9em;">
+            <thead>
+                <tr style="border-bottom: 1px solid var(--border-color);">
+                    <th style="padding: 4px 8px;">Name</th>
+                    <th style="padding: 4px 8px;">Value</th>
+                </tr>
+            </thead>
+            <tbody>
+                ${items.map(c => `
+                    <tr style="border-bottom: 1px solid var(--border-color-dim, #33333333);">
+                        <td style="padding: 4px 8px; font-weight: 500;">${c.name}</td>
+                        <td style="padding: 4px 8px; word-break: break-all;">${c.value}</td>
+                    </tr>
+                `).join('')}
+            </tbody>
+        </table>
+    `;
+}
+
 function renderHeadersTab(request) {
     const formatHeaderSection = (title, headers) => {
         if (!headers || Object.keys(headers).length === 0) return '';
         const rows = Object.entries(headers).map(([k, v]) => `
             <tr>
-                <td style="font-weight: 500; color: var(--text-secondary); padding: 4px 8px; vertical-align: top;">${k}:</td>
+                <td style="font-weight: 500; color: var(--text-flavor); padding: 4px 8px; vertical-align: top;">${k}:</td>
                 <td style="word-break: break-all; padding: 4px 8px;">${v}</td>
             </tr>
         `).join('');
@@ -570,11 +862,11 @@ function renderHeadersTab(request) {
             <details open style="margin-bottom: 1rem;">
                 <summary style="font-weight: bold; padding: 4px 0; cursor: pointer; color: var(--text-primary);">General</summary>
                 <div style="display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 0.9em; padding-left: 8px;">
-                     <div style="color: var(--text-secondary);">Request URL:</div><div style="word-break: break-all;">${request.url}</div>
-                     <div style="color: var(--text-secondary);">Request Method:</div><div>${request.method}</div>
-                     <div style="color: var(--text-secondary);">Status Code:</div><div>${request.status}</div>
-                     <div style="color: var(--text-secondary);">Remote Address:</div><div>${request.remoteIP || '-'}</div>
-                     <div style="color: var(--text-secondary);">Referrer Policy:</div><div>${request.requestHeaders?.['referrer-policy'] || 'strict-origin-when-cross-origin'}</div>
+                     <div style="color: var(--text-flavor);">Request URL:</div><div style="word-break: break-all;">${request.url}</div>
+                     <div style="color: var(--text-flavor);">Request Method:</div><div>${request.method}</div>
+                     <div style="color: var(--text-flavor);">Status Code:</div><div>${request.status}</div>
+                     <div style="color: var(--text-flavor);">Remote Address:</div><div>${request.remoteIP || '-'}</div>
+                     <div style="color: var(--text-flavor);">Referrer Policy:</div><div>${request.requestHeaders?.['referrer-policy'] || 'strict-origin-when-cross-origin'}</div>
                 </div>
             </details>
             ${formatHeaderSection('Response Headers', request.responseHeaders)}
@@ -604,48 +896,51 @@ function renderCookiesTab(request) {
         resCookies = [{ name: 'Set-Cookie', value: request.responseHeaders['set-cookie'] }];
     }
 
-    const renderTable = (cookies) => {
-        if (!cookies.length) return '<div style="padding: 8px; color: var(--text-secondary);">No cookies found</div>';
-        return `
-            <table style="width: 100%; text-align: left; border-collapse: collapse; font-size: 0.9em;">
-                <thead>
-                    <tr style="border-bottom: 1px solid var(--border-color);">
-                        <th style="padding: 4px 8px;">Name</th>
-                        <th style="padding: 4px 8px;">Value</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    ${cookies.map(c => `
-                        <tr style="border-bottom: 1px solid var(--border-color-dim, #33333333);">
-                            <td style="padding: 4px 8px; font-weight: 500;">${c.name}</td>
-                            <td style="padding: 4px 8px; word-break: break-all;">${c.value}</td>
-                        </tr>
-                    `).join('')}
-                </tbody>
-            </table>
-        `;
-    };
-
     return `
         <div style="padding: 0 0.5rem; display: flex; flex-direction: column; gap: 1rem;">
             <div>
                 <div style="font-weight: bold; margin-bottom: 0.5rem;">Request Cookies</div>
-                ${renderTable(reqCookies)}
+                ${renderNameValueTable(reqCookies, 'No cookies found')}
             </div>
             <div>
                 <div style="font-weight: bold; margin-bottom: 0.5rem;">Response Cookies</div>
-                ${renderTable(resCookies)}
+                ${renderNameValueTable(resCookies, 'No cookies found')}
             </div>
         </div>
     `;
 }
 
 function renderRequestTab(request) {
-    if (!request.requestBody && !request.body) return '<div style="padding: 1rem; color: var(--text-secondary);">No payload</div>';
+    let queryParamsHtml = '';
+    try {
+        const url = new URL(request.url.startsWith('http') ? request.url : `http://${request.domain || 'localhost'}${request.url}`);
+        const params = [];
+        for (const [key, value] of url.searchParams) {
+            params.push({ name: key, value: value });
+        }
+
+        if (params.length > 0) {
+            queryParamsHtml = `
+                <div style="margin-bottom: 1rem;">
+                    <div style="font-weight: bold; margin-bottom: 0.5rem; color: var(--text-primary);">Query Parameters</div>
+                    ${renderNameValueTable(params)}
+                </div>
+            `;
+        }
+    } catch (e) {
+        console.error("Failed to parse URL for query params", e);
+    }
+
+    const hasBody = request.requestBody || request.body || (typeof request.requestBody === 'string' && request.requestBody.length > 0);
+
+    if (!hasBody && !queryParamsHtml) return '<div style="padding: 1rem; color: var(--text-secondary);">No payload or query parameters</div>';
+
     return `
         <div style="display: flex; flex-direction: column; height: 100%;">
-             <div style="display: flex; justify-content: flex-end; padding: 4px;">
-                <button class="btn-action" onclick="copyToClipboard(currentRequestBody)">Copy</button>
+            ${queryParamsHtml}
+             <div style="display: flex; justify-content: flex-end; padding: 4px; gap: 8px;">
+                <div style="font-size: 0.8em; color: var(--text-secondary); display: flex; align-items: center;">${request.requestBody ? formatBytes(request.requestBody.length || 0) : ''}</div>
+                <button class="btn-action" id="btn-copy-req-body">Copy</button>
             </div>
             <div id="request-body-editor" style="flex: 1; border: 1px solid var(--border-color); border-radius: 4px; overflow: hidden; min-height: 200px;"></div>
         </div>
@@ -656,7 +951,7 @@ function renderResponseTab(request) {
     if (!request.responseBody && !request.body) return '<div style="padding: 1rem; color: var(--text-secondary);">No content</div>';
 
     return `
-        <div style="display: flex; flex-direction: column; height: 100%;">
+        <div style="display: flex; flex-direction: column; height: 100%">
             <div style="display: flex; justify-content: space-between; align-items: center; padding: 4px; border-bottom: 1px solid var(--border-color);">
                 <div style="font-size: 0.8em; color: var(--text-secondary);">${formatBytes(request.size || 0)}</div>
                 <div style="display: flex; gap: 8px; align-items: center;">
@@ -682,7 +977,8 @@ function renderTimingsTab(request) {
                 <div>Duration:</div><div>${request.duration.toFixed(2)} ms</div>
                 <div style="border-top: 1px solid var(--border-color); margin-top:8px; padding-top:8px; font-weight:bold;">Total Transferred:</div><div style="border-top: 1px solid var(--border-color); margin-top:8px; padding-top:8px; font-weight:bold;">${formatBytes(request.transferred || request.size || 0)}</div>
              </div>
-             <!-- Future: detailed breakdown -->
+             <div class="card-title" style="margin-top: 1rem; padding: 0">Middleware Trace</div>
+             <div id="middleware-trace-container"></div>
         </div>
     `;
 }
@@ -692,8 +988,8 @@ function renderSecurityTab(request) {
         <div style="padding: 1rem;">
             <div style="margin-bottom: 1rem; font-weight: bold;">Connection</div>
             <div style="display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 0.9em;">
-                <div style="color: var(--text-secondary);">Protocol:</div><div>${request.protocol || request.scheme || 'tls'}</div>
-                <div style="color: var(--text-secondary);">Remote Address:</div><div>${request.remoteIP || 'Unknown'}</div>
+                <div style="color: var(--text-flavor);">Protocol:</div><div>${request.protocol || request.scheme || 'tls'}</div>
+                <div style="color: var(--text-flavor);">Remote Address:</div><div>${request.remoteIP || 'Unknown'}</div>
             </div>
              <div style="margin-top: 1rem; color: var(--text-secondary); font-style: italic;">
                 Detailed certificate information is not currently captured by the interceptor.
@@ -702,14 +998,6 @@ function renderSecurityTab(request) {
     `;
 }
 
-
-// Attach event listeners
-// document.getElementById('auto-format-check').onchange = (e) => {
-//     window.autoFormatEnabled = e.target.checked;
-//     renderMonacoEditor(request);
-// };
-
-
 function closeRequestDetails() {
     document.getElementById('request-details-container').style.display = 'none';
     if (window.requestsTable) window.requestsTable.redraw();
@@ -753,13 +1041,26 @@ function getExtension(contentType) {
     if (contentType.includes('json')) return 'json';
     if (contentType.includes('html')) return 'html';
     if (contentType.includes('xml')) return 'xml';
-    if (contentType.includes('javascript')) return 'js';
+    if (contentType.includes('javascript')) return 'javascript';
     if (contentType.includes('css')) return 'css';
+    if (contentType.includes('image/png')) return 'png';
+    if (contentType.includes('image/jpeg')) return 'jpeg';
+    if (contentType.includes('image/gif')) return 'gif';
+    if (contentType.includes('image/svg+xml')) return 'svg';
+    if (contentType.includes('application/pdf')) return 'pdf';
+    if (contentType.includes('application/zip')) return 'zip';
+    if (contentType.includes('application/octet-stream')) return 'bin';
     return 'txt';
 }
 
-function getRequestBody(request) {
-    let value = request.body || '';
+function getContentType(headers) {
+    if (!headers) return '';
+    const output = headers['content-type'] || headers['Content-Type'] || '';
+    return output.toLowerCase();
+}
+
+function getBodyContent(body) {
+    let value = body || '';
     if (typeof value === 'object') {
         try {
             value = JSON.stringify(value, null, 2);
@@ -772,25 +1073,13 @@ function getRequestBody(request) {
     return value;
 }
 
-let currentRequestBody = ''; // Global/Module scope tracking for request body
-
 function initRequestEditor(request) {
     const el = document.getElementById('request-body-editor');
     if (!el) return;
 
-    let content = request.requestBody || request.body || '';
-    let language = 'plaintext';
-    const contentType = (request.requestHeaders?.['content-type'] || '').toLowerCase();
-
-    if (contentType.includes('json')) language = 'json';
-    else if (contentType.includes('html')) language = 'html';
-    else if (contentType.includes('xml')) language = 'xml';
-    else if (contentType.includes('javascript') || contentType.includes('application/x-javascript')) language = 'javascript';
-    else if (contentType.includes('css')) language = 'css';
-    else if (contentType.includes('typescript')) language = 'typescript';
-    else if (contentType.includes('markdown')) language = 'markdown';
-    else if (contentType.includes('sql')) language = 'sql';
-    else if (contentType.includes('yaml')) language = 'yaml';
+    let content = request.requestBody || '';
+    const contentType = getContentType(request.requestHeaders);
+    let language = getExtension(contentType);
 
     if (typeof content === 'object') {
         content = JSON.stringify(content, null, 2);
@@ -805,31 +1094,27 @@ function initRequestEditor(request) {
         }
     }
 
-    currentRequestBody = content; // store for copy
+    // Handle binary
+    if (content === '[Binary or Unreadable Body]') {
+        el.innerHTML = '<div style="display: flex; align-items: center; justify-content: center; height: 100%; color: var(--text-secondary);">Binary Content</div>';
+        return;
+    }
 
-    renderMonacoEditor(el, content, language, false); // Request body usually not auto-formatted
+    renderMonacoEditor(el, content, language, false);
+
+    const btnCopy = document.getElementById('btn-copy-req-body');
+    if (btnCopy) btnCopy.onclick = () => copyToClipboard(getBodyContent(request.requestBody));
 }
 
 function initResponseEditor(request) {
     const el = document.getElementById('response-body-editor');
     if (!el) return;
 
-    let content = request.body || request.responseBody;
-    let contentType = request.contentType || '';
-
+    let content = request.body || request.responseBody; // fallback to responseBody property if mapped
     if (!content) content = '';
 
-    // Auto-Format Logic
-    let language = 'plaintext';
-    if (contentType.includes('json')) language = 'json';
-    else if (contentType.includes('html')) language = 'html';
-    else if (contentType.includes('xml')) language = 'xml';
-    else if (contentType.includes('javascript') || contentType.includes('application/x-javascript')) language = 'javascript';
-    else if (contentType.includes('css')) language = 'css';
-    else if (contentType.includes('typescript')) language = 'typescript';
-    else if (contentType.includes('markdown')) language = 'markdown';
-    else if (contentType.includes('sql')) language = 'sql';
-    else if (contentType.includes('yaml')) language = 'yaml';
+    const contentType = getContentType(request.responseHeaders);
+    let language = getExtension(contentType);
 
     if (typeof content === 'object') {
         content = JSON.stringify(content, null, 2);
@@ -845,17 +1130,28 @@ function initResponseEditor(request) {
         }
     }
 
+    // Handle binary
+    if (content === '[Binary or Unreadable Body]') {
+        el.innerHTML = '<div style="display: flex; align-items: center; justify-content: center; height: 100%; color: var(--text-secondary);">Binary Content</div>';
+        // Ensure download button works
+        const btnDownload = document.getElementById('btn-download-body');
+        // We can't easily download the *actual* binary if we didn't store it.
+        // But if we have it in memory or if backend serving it via separate endpoint...
+        // For now, download the text placeholder is all we can do unless we fetch raw.
+        if (btnDownload) btnDownload.onclick = () => alert("Original binary content not stored in dashboard history.");
+        return;
+    }
+
     renderMonacoEditor(el, content, language, window.autoFormatEnabled !== false);
 
     // Attach button listeners
     const btnCopy = document.getElementById('btn-copy-body');
     const btnDownload = document.getElementById('btn-download-body');
-    if (btnCopy) btnCopy.onclick = () => copyToClipboard(getRequestBody(request));
-    if (btnDownload) btnDownload.onclick = () => downloadString(getRequestBody(request), `body-${request.timestamp}.${getExtension(request.contentType)}`);
+    if (btnCopy) btnCopy.onclick = () => copyToClipboard(getBodyContent(content));
+    // TODO: replace with filename
+    if (btnDownload) btnDownload.onclick = () => downloadString(getBodyContent(content), `body-${request.timestamp}.${getExtension(request.contentType)}`);
 }
 
-let currentMonacoEditor = null; // To manage the active editor instance
-
 function renderMonacoEditor(containerElement, value, language, shouldFormat = false) {
     if (!window.monaco) {
         require.config({ paths: { 'vs': 'https://cdn.jsdelivr.net/npm/monaco-editor@0.44.0/min/vs' } });
@@ -863,6 +1159,8 @@ function renderMonacoEditor(containerElement, value, language, shouldFormat = fa
         return;
     }
 
+    console.log({ language });
+    window.currentEditor?.dispose();
     window.currentEditor = monaco.editor.create(containerElement, {
         value: value,
         language: language,
@@ -913,16 +1211,4 @@ function formatBytes(bytes, decimals = 2) {
     return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
 }
 
-window.updateRequestsList = function (newRequests) {
-    if (!window.requestsTable || !newRequests || newRequests.length === 0) return;
 
-    // console.log('[requests.js] Adding/Updating', newRequests.length, 'rows');
-    window.requestsTable.updateOrAddData(newRequests)
-        .then(() => {
-            // Force redraw/filter application
-            window.requestsTable.recalc();
-            window.requestsTable.redraw();
-            // console.log('[requests.js] Table updated');
-        })
-        .catch(err => console.error("Failed to update table data", err));
-};