nestjs-devtools 1.5.2 → 1.5.4

package/dist/devtools.controller.js

@@ -42,14 +42,14 @@ let DevtoolsController = class DevtoolsController {
                 panels[collector.name] = { label: collector.name, summary: 'Error collecting data' };
             }
         }
-        res.json(panels);
+        res.send(panels);
     }
     getHistory(res) {
-        res.json(this.devtoolsService.getHistorySummary());
+        res.send(this.devtoolsService.getHistorySummary());
     }
     getRequestDetail(id, res) {
         const history = this.devtoolsService.getHistory();
-        res.json(history.find((r) => r.id === id) ?? null);
+        res.send(history.find((r) => r.id === id) ?? null);
     }
 };
 exports.DevtoolsController = DevtoolsController;

package/dist/toolbar/profiler.js

@@ -64,7 +64,15 @@ const PROFILER_PAGE = (config) => {
   .panel-body tr:last-child td, .panel-body tr:last-child th { border-bottom: none; }
   .empty { color: #bbb; font-size: 12px; }
   .mono { font-family: SF Mono,Menlo,monospace; font-size: 11px; }
-  .query-table { width: 100%; }
+    #history-detail { display: none; margin-top: 12px; }
+    #history-detail.open { display: block; }
+    #history-body tr { cursor: pointer; }
+    #history-body tr:hover { background: #f0f7ff; }
+    #history-body tr.selected { background: #e1effa; }
+    .detail-section { margin-bottom: 12px; }
+    .detail-section:last-child { margin-bottom: 0; }
+    .detail-section h4 { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: #999; margin-bottom: 6px; }
+    .query-table { width: 100%; }
   .query-row { display: flex; align-items: flex-start; padding: 5px 0; gap: 6px; border-bottom: 1px solid #eee; font-size: 11px; }
   .query-row:last-child { border-bottom: none; }
   .query-num { color: #999; width: 22px; flex-shrink: 0; }
@@ -122,6 +130,9 @@ const PROFILER_PAGE = (config) => {
           <thead><tr style="background:#fafafa"><th style="padding:8px 12px;text-align:left;color:#888;font-weight:600;font-size:10px;text-transform:uppercase;letter-spacing:0.5px;border-bottom:1px solid #ddd">Time</th><th style="padding:8px 12px;text-align:left;color:#888;font-weight:600;font-size:10px;text-transform:uppercase;letter-spacing:0.5px;border-bottom:1px solid #ddd">Method</th><th style="padding:8px 12px;text-align:left;color:#888;font-weight:600;font-size:10px;text-transform:uppercase;letter-spacing:0.5px;border-bottom:1px solid #ddd">Path</th><th style="padding:8px 12px;text-align:left;color:#888;font-weight:600;font-size:10px;text-transform:uppercase;letter-spacing:0.5px;border-bottom:1px solid #ddd">Status</th><th style="padding:8px 12px;text-align:left;color:#888;font-weight:600;font-size:10px;text-transform:uppercase;letter-spacing:0.5px;border-bottom:1px solid #ddd">Duration</th></tr></thead>
           <tbody id="history-body"></tbody>
         </table>
+        <div id="history-detail" class="panel">
+          <div id="history-detail-body" class="panel-body open" style="display:block;padding:16px"></div>
+        </div>
       </div>
     </div>
   </div>
@@ -249,25 +260,75 @@ const PROFILER_PAGE = (config) => {
     });
   }
 
+  function renderRequestDetail(d) {
+    if (!d) return '<span class="empty">No details available</span>';
+    var h = '<div class="detail-section"><h4>Request</h4><table>'+
+      '<tr><th style="width:80px">Method</th><td><span class="badge badge-'+d.method.toLowerCase()+'">'+escape(d.method)+'</span></td></tr>'+
+      '<tr><th>Path</th><td class="mono">'+escape(d.path)+'</td></tr>'+
+      '<tr><th>Status</th><td><span class="status-badge status-'+(d.statusCode||'')+'">'+escape(d.statusCode||'')+'</span></td></tr>'+
+      '<tr><th>Duration</th><td>'+(d.duration!=null?d.duration.toFixed(1):'')+' ms</td></tr>'+
+      '<tr><th>Memory</th><td>'+escape(d.memory||'')+'</td></tr>'+
+      '<tr><th>Route</th><td class="mono" style="font-size:10px">'+escape(d.route||'')+'</td></tr>'+
+      '<tr><th>Time</th><td>'+escape(new Date(d.timestamp).toLocaleTimeString())+'</td></tr>'+
+      '</table></div>';
+    if (d.queries && d.queries.length>0) {
+      h += '<div class="detail-section"><h4>Queries ('+d.queries.length+')</h4>';
+      d.queries.forEach(function(q,i){
+        h += '<div class="query-row"><span class="query-num">'+(i+1)+'</span><span class="query-sql">'+escape(q.sql||'')+'</span><span class="query-time">'+escape(q.duration||'')+'</span></div>';
+      });
+      h += '</div>';
+    }
+    if (d.logs && d.logs.length>0) {
+      h += '<div class="detail-section"><h4>Logs ('+d.logs.length+')</h4>';
+      d.logs.forEach(function(e){
+        var lc = e.level==='error' ? 'log-error' : e.level==='warn' ? 'log-warn' : 'log-info';
+        h += '<div class="log-row"><span class="log-level '+lc+'">'+escape(e.level||'')+'</span><span>'+escape(e.message||'')+'</span></div>';
+      });
+      h += '</div>';
+    }
+    if (d.exception) {
+      h += '<div class="detail-section"><h4>Exception</h4><div class="exception-box"><div class="msg">'+escape(d.exception.message||'')+'</div><div class="stack">'+escape(d.exception.stack||'')+'</div></div></div>';
+    }
+    return h;
+  }
+
   function loadHistory() {
     fetch(BASE + '/__devtools/history').then(function(r){return r.json()}).then(function(rows){
       var tbody = document.getElementById('history-body');
+      var detail = document.getElementById('history-detail');
       tbody.innerHTML = '';
       if (!rows || rows.length===0) {
         tbody.innerHTML = '<tr><td colspan="5" style="padding:20px;text-align:center;color:#bbb">No requests recorded yet</td></tr>';
         return;
       }
+      var selectedId = tbody.getAttribute('data-selected');
       rows.forEach(function(r){
         var sc = r.statusCode;
         var scCls = sc>=400 ? 'error-text' : sc>=300 ? 'warn-text' : 'ok-text';
         var mCls = 'badge-'+r.method.toLowerCase();
-        tbody.innerHTML += '<tr>'+
+        var sel = r.id===selectedId ? ' selected' : '';
+        var tr = document.createElement('tr');
+        tr.className = sel;
+        tr.innerHTML =
           '<td style="padding:8px 12px;border-bottom:1px solid #eee;color:#888">'+escape(new Date(r.timestamp).toLocaleTimeString())+'</td>'+
           '<td style="padding:8px 12px;border-bottom:1px solid #eee"><span class="badge '+mCls+'">'+escape(r.method)+'</span></td>'+
           '<td style="padding:8px 12px;border-bottom:1px solid #eee;font-family:SF Mono,Menlo,monospace;font-size:11px">'+escape(r.path)+'</td>'+
           '<td style="padding:8px 12px;border-bottom:1px solid #eee"><span class="'+scCls+'">'+sc+'</span></td>'+
-          '<td style="padding:8px 12px;border-bottom:1px solid #eee;color:#888;font-family:SF Mono,Menlo,monospace">'+(r.duration!=null?r.duration.toFixed(1):'')+' ms</td>'+
-          '</tr>';
+          '<td style="padding:8px 12px;border-bottom:1px solid #eee;color:#888;font-family:SF Mono,Menlo,monospace">'+(r.duration!=null?r.duration.toFixed(1):'')+' ms</td>';
+        tr.addEventListener('click', function(){
+          document.querySelectorAll('#history-body tr').forEach(function(t){t.classList.remove('selected')});
+          tr.classList.add('selected');
+          tbody.setAttribute('data-selected', r.id);
+          fetch(BASE + '/__devtools/request/' + r.id).then(function(r2){return r2.json()}).then(function(detailData){
+            document.getElementById('history-detail-body').innerHTML = renderRequestDetail(detailData);
+            detail.classList.add('open');
+          }).catch(function(e){
+            console.error('[Devtools] Failed to load request detail:', e);
+            document.getElementById('history-detail-body').innerHTML = '<span class="empty">Failed to load detail</span>';
+            detail.classList.add('open');
+          });
+        });
+        tbody.appendChild(tr);
       });
     }).catch(function(e){
       console.error('[Devtools] Failed to load history:', e);

package/dist/toolbar/profiler.js.map

@@ -1 +1 @@
-{"version":3,"file":"profiler.js","sourceRoot":"","sources":["../../toolbar/profiler.ts"],"names":[],"mappings":";;;AAIO,MAAM,aAAa,GAAG,CAAC,MAAoC,EAAE,EAAE;IACpE,MAAM,EAAE,KAAK,GAAG,MAAM,EAAE,GAAG,MAAM,IAAI,EAAE,CAAC;IAExC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAoRD,CAAC;AACT,CAAC,CAAC;AAxRW,QAAA,aAAa,iBAwRxB"}
+{"version":3,"file":"profiler.js","sourceRoot":"","sources":["../../toolbar/profiler.ts"],"names":[],"mappings":";;;AAIO,MAAM,aAAa,GAAG,CAAC,MAAoC,EAAE,EAAE;IACpE,MAAM,EAAE,KAAK,GAAG,MAAM,EAAE,GAAG,MAAM,IAAI,EAAE,CAAC;IAExC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAiVD,CAAC;AACT,CAAC,CAAC;AArVW,QAAA,aAAa,iBAqVxB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nestjs-devtools",
-  "version": "1.5.2",
+  "version": "1.5.4",
   "description": "Symfony-style debug toolbar for NestJS applications",
   "keywords": [
     "nestjs",