feat: make request inspector table headers sortable

index.html

@@ -472,6 +472,8 @@
             let allRows = []; // Store all fetched rows globally
             let currentFilteredRows = []; // Store currently filtered rows
             let uniqueModels = [];
+            let currentSortKey = null; // Track current sort column
+            let currentSortDirection = 'asc'; // Track current sort direction ('asc' or 'desc')
             const rowsPerFetch = 100; // How many rows to fetch per API call
 
             // Plotly layout defaults (same as before)
@@ -925,10 +927,27 @@
 
                  document.getElementById('request-table-title').textContent = `Request Inspector (${rows.length} requests shown)`;
 
-                 // Create Header
-                 const headerRow = tableHead.insertRow();
-                 const headers = ['Provider', 'Model', 'Status', 'Duration (ms)', 'Error', 'Action'];
-                 headers.forEach(text => { headerRow.insertCell().textContent = text; });
+                 // Create Header (only if it doesn't exist)
+                 if (tableHead.rows.length === 0) {
+                     const headerRow = tableHead.insertRow();
+                     const headers = [
+                         { text: 'Provider', key: 'provider_name', sortable: true },
+                         { text: 'Model', key: 'model_id', sortable: true },
+                         { text: 'Status', key: 'response_status_code', sortable: true },
+                         { text: 'Duration (ms)', key: 'duration_ms', sortable: true },
+                         { text: 'Error', key: 'error_message', sortable: true }, // Sort by presence of error msg
+                         { text: 'Action', key: null, sortable: false }
+                     ];
+                     headers.forEach(header => {
+                         const th = document.createElement('th');
+                         th.textContent = header.text;
+                         if (header.sortable) {
+                             th.classList.add('sortable-header');
+                             th.dataset.sortKey = header.key;
+                         }
+                         headerRow.appendChild(th);
+                     });
+                 }
 
                  // Create Body Rows
                  rows.forEach((row, index) => { // Use index within the *filtered* array

style.css

@@ -27,6 +27,37 @@ p {
 	margin-bottom: 0;
 }
 
+/* Sortable Table Header Styles */
+.sortable-header {
+    cursor: pointer;
+    position: relative; /* Needed for pseudo-element positioning */
+    padding-right: 20px; /* Make space for the arrow */
+}
+.sortable-header::after {
+    content: '';
+    position: absolute;
+    right: 8px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 0;
+    height: 0;
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+    opacity: 0.4; /* Dim by default */
+}
+.sortable-header:hover::after {
+    opacity: 0.7; /* Slightly brighter on hover */
+}
+.sortable-header.sort-asc::after {
+    border-bottom: 5px solid var(--text-color); /* Arrow pointing up */
+    opacity: 1;
+}
+.sortable-header.sort-desc::after {
+    border-top: 5px solid var(--text-color); /* Arrow pointing down */
+    opacity: 1;
+}
+
+
 /* Spinner Styles */
 #loading {
     display: flex;