feat: Implement sorting for the request inspector table

index.html

@@ -586,6 +586,24 @@
                  }
              });
 
+             // Sorting listener for Request Inspector Table Header
+             document.querySelector('#requestTable thead').addEventListener('click', (event) => {
+                 const header = event.target.closest('th.sortable-header');
+                 if (!header) return; // Clicked outside a sortable header
+
+                 const sortKey = header.dataset.sortKey;
+
+                 // Determine new sort direction
+                 if (sortKey === currentSortKey) {
+                     currentSortDirection = currentSortDirection === 'asc' ? 'desc' : 'asc';
+                 } else {
+                     currentSortKey = sortKey;
+                     currentSortDirection = 'asc';
+                 }
+
+                 sortTable(currentSortKey, currentSortDirection);
+             });
+
 
             // --- Fetching Logic ---
             function fetchAllRows(offset = 0) {
@@ -919,11 +937,53 @@
                 });
             }
 
+            // --- Sorting Function ---
+            function sortTable(key, direction) {
+                currentFilteredRows.sort((a, b) => {
+                    let valA = a[key];
+                    let valB = b[key];
+
+                    // Handle specific cases
+                    if (key === 'error_message') { // Sort by presence (Yes/No)
+                        valA = valA ? 1 : 0; // Error present = 1, No error = 0
+                        valB = valB ? 1 : 0;
+                    } else if (key === 'model_id') { // Sort by shortened model name
+                        valA = valA ? valA.split('/').pop() : '';
+                        valB = valB ? valB.split('/').pop() : '';
+                    }
+
+                    // Handle null/undefined values (treat them as lowest or highest depending on direction)
+                    const nullVal = direction === 'asc' ? Infinity : -Infinity;
+                    valA = (valA === null || valA === undefined) ? nullVal : valA;
+                    valB = (valB === null || valB === undefined) ? nullVal : valB;
+
+                    // Comparison logic
+                    if (typeof valA === 'string' && typeof valB === 'string') {
+                        return direction === 'asc' ? valA.localeCompare(valB) : valB.localeCompare(valA);
+                    } else {
+                        return direction === 'asc' ? valA - valB : valB - valA;
+                    }
+                });
+                createRequestTable(currentFilteredRows); // Re-render the table body
+                updateSortIndicators(); // Update visual indicators
+            }
+
+            function updateSortIndicators() {
+                document.querySelectorAll('#requestTable th.sortable-header').forEach(th => {
+                    th.classList.remove('sort-asc', 'sort-desc');
+                    if (th.dataset.sortKey === currentSortKey) {
+                        th.classList.add(currentSortDirection === 'asc' ? 'sort-asc' : 'sort-desc');
+                    }
+                });
+            }
+
+
             // --- Request Inspector Table ---
             function createRequestTable(rows) {
                  const tableHead = document.querySelector('#requestTable thead');
                  const tableBody = document.querySelector('#requestTable tbody');
-                 tableHead.innerHTML = ''; tableBody.innerHTML = ''; // Clear
+                 // Clear only the body, keep the header for event listeners
+                 tableBody.innerHTML = '';
 
                  document.getElementById('request-table-title').textContent = `Request Inspector (${rows.length} requests shown)`;