flow-debugger 1.9.6 → 1.9.8

package/dashboard/app.js

@@ -1,415 +1,505 @@
-// ─────────────────────────────────────────────────────────────
-// flow-debugger — Dashboard App
-// Fetches analytics from /__debugger API and renders live UI
-// ─────────────────────────────────────────────────────────────
-
-const API_URL = '/__debugger';
-let autoRefresh = true;
-let refreshInterval = null;
-
-// ─── Init ─────────────────────────────────────────────────
-document.addEventListener('DOMContentLoaded', () => {
-  refreshData();
-  startAutoRefresh();
-});
-
-function startAutoRefresh() {
-  if (refreshInterval) clearInterval(refreshInterval);
-  refreshInterval = setInterval(refreshData, 3000);
-}
-
-function toggleAutoRefresh() {
-  autoRefresh = !autoRefresh;
-  const btn = document.getElementById('autoRefreshBtn');
-  if (autoRefresh) {
-    btn.textContent = 'Auto: ON';
-    startAutoRefresh();
-  } else {
-    btn.textContent = 'Auto: OFF';
-    if (refreshInterval) clearInterval(refreshInterval);
-  }
-}
-
-async function refreshData() {
-  try {
-    const res = await fetch(API_URL);
-    if (!res.ok) throw new Error('API error');
-    const data = await res.json();
-
-    // Seed sample data if empty for a better first-look experience
-    if (!data.totalRequests || data.totalRequests === 0) {
-      const seededData = seedSampleData(data);
-      renderDashboard(seededData);
-    } else {
-      renderDashboard(data);
-    }
-  } catch (err) {
-    document.getElementById('statusBadge').textContent = '● OFFLINE';
-    document.getElementById('statusBadge').className = 'badge badge-offline';
-  }
-}
-
-// ─── Render ───────────────────────────────────────────────
-function renderDashboard(data) {
-  // Status
-  document.getElementById('statusBadge').textContent = '● LIVE';
-  document.getElementById('statusBadge').className = 'badge badge-live';
-
-  // Uptime
-  const uptimeMs = data.uptime || 0;
-  document.getElementById('uptime').textContent = `Uptime: ${formatDuration(uptimeMs)}`;
-
-  // Stats
-  document.getElementById('totalRequests').textContent = formatNumber(data.totalRequests || 0);
-  document.getElementById('totalErrors').textContent = formatNumber(data.totalErrors || 0);
-  document.getElementById('totalSlow').textContent = formatNumber(data.totalSlow || 0);
-
-  const total = data.totalRequests || 0;
-  const errors = data.totalErrors || 0;
-  const rate = total > 0 ? Math.round(((total - errors) / total) * 100) : 100;
-  document.getElementById('successRate').textContent = rate + '%';
-
-  // Panels
-  renderHealthPanel(data.serviceHealth || []);
-  renderFailuresPanel(data.topFailures || []);
-  renderEndpointsTable(data.endpoints || []);
-  renderSlowQueries(data.recentTraces || []);
-  renderRecentTraces(data.recentTraces || []);
-}
-
-// ─── Health Panel ─────────────────────────────────────────
-function renderHealthPanel(health) {
-  const panel = document.getElementById('healthPanel');
-  if (!health.length) {
-    panel.innerHTML = '<div class="empty-state">No services detected yet</div>';
-    return;
-  }
-
-  panel.innerHTML = `<div class="health-grid">${health.map(h => `
-    <div class="health-pill">
-      <div class="health-dot ${h.status}"></div>
-      <div class="health-info">
-        <span class="health-name">${escapeHtml(h.name)}</span>
-        <span class="health-rate">${h.successRate}% success · ${h.totalChecks} checks</span>
-      </div>
-    </div>
-  `).join('')}</div>`;
-}
-
-// ─── Failures Panel ───────────────────────────────────────
-function renderFailuresPanel(failures) {
-  const panel = document.getElementById('failuresPanel');
-  if (!failures.length) {
-    panel.innerHTML = '<div class="empty-state">No failures recorded</div>';
-    return;
-  }
-
-  const maxPct = Math.max(...failures.map(f => f.percentage), 1);
-
-  panel.innerHTML = `<div class="failure-bar-group">${failures.map(f => `
-    <div class="failure-item">
-      <span class="failure-label">${escapeHtml(f.service)}</span>
-      <div class="failure-bar-bg">
-        <div class="failure-bar" style="width: ${(f.percentage / maxPct) * 100}%"></div>
-      </div>
-      <span class="failure-pct">${f.percentage}%</span>
-    </div>
-  `).join('')}</div>`;
-}
-
-// ─── Endpoints Table ──────────────────────────────────────
-function renderEndpointsTable(endpoints) {
-  const tbody = document.getElementById('endpointsTable');
-  if (!endpoints.length) {
-    tbody.innerHTML = '<tr><td colspan="9" class="empty-state">No endpoints tracked yet</td></tr>';
-    return;
-  }
-
-  tbody.innerHTML = endpoints.map(ep => `
-    <tr>
-      <td><span class="method-badge method-${ep.method}">${ep.method}</span></td>
-      <td><span class="endpoint-path">${escapeHtml(ep.path)}</span></td>
-      <td class="td-mono">${formatNumber(ep.totalRequests)}</td>
-      <td class="td-mono" style="color: ${ep.errorCount > 0 ? 'var(--red)' : 'inherit'}">${ep.errorCount}</td>
-      <td class="td-mono" style="color: ${ep.slowCount > 0 ? 'var(--yellow)' : 'inherit'}">${ep.slowCount}</td>
-      <td class="td-mono">${Math.round(ep.avgDuration)}</td>
-      <td class="td-mono">${Math.round(ep.p95Duration)}</td>
-      <td class="td-mono">${Math.round(ep.maxDuration)}</td>
-      <td>${(ep.commonIssues || []).slice(0, 2).map(i => `<span class="issue-tag">${escapeHtml(i)}</span>`).join('') || '—'}</td>
-    </tr>
-  `).join('');
-}
-
-// ─── Slow Queries ─────────────────────────────────────────
-function renderSlowQueries(traces) {
-  const container = document.getElementById('slowQueries');
-  const slowSteps = [];
-
-  for (const trace of traces) {
-    for (const step of (trace.steps || [])) {
-      if (step.classification === 'WARN' && step.duration > 300 && step.metadata?.sql) {
-        slowSteps.push({
-          sql: step.metadata.sql,
-          duration: step.duration,
-          service: step.service,
-          endpoint: trace.endpoint,
-        });
-      }
-    }
-  }
-
-  if (!slowSteps.length) {
-    container.innerHTML = '<div class="empty-state">No slow queries detected</div>';
-    return;
-  }
-
-  container.innerHTML = `<div class="slow-query-list">${slowSteps.slice(0, 10).map(sq => `
-    <div class="slow-query-item">
-      <span class="slow-query-icon">⚠</span>
-      <span class="slow-query-sql">${escapeHtml(sq.sql)}</span>
-      <span class="slow-query-dur">${Math.round(sq.duration)}ms</span>
-    </div>
-  `).join('')}</div>`;
-}
-
-// ─── Recent Traces ────────────────────────────────────────
-function renderRecentTraces(traces) {
-  const container = document.getElementById('recentTraces');
-  if (!traces.length) {
-    container.innerHTML = '<div class="empty-state">No traces recorded yet</div>';
-    return;
-  }
-
-  container.innerHTML = `<div class="trace-list">${traces.slice(0, 15).map((trace, idx) => `
-    <div class="trace-item">
-      <div class="trace-header" onclick="toggleTrace(${idx})">
-        <div class="trace-header-left">
-          <span class="method-badge method-${trace.method}">${trace.method}</span>
-          <span class="trace-endpoint">${escapeHtml(trace.endpoint)}</span>
-          <span class="trace-id">${trace.traceId}</span>
-          <span class="badge" style="background: rgba(124, 58, 237, 0.1); color: var(--accent-light); font-size: 10px; border: 1px solid var(--border)">${trace.language === 'python' ? 'Python' : 'Node'}</span>
-        </div>
-        <div class="trace-header-right">
-          <span class="classification-badge classification-${trace.classification}">${trace.classification}</span>
-          <span class="trace-dur">${Math.round(trace.totalDuration)}ms</span>
-          <span style="color: var(--text-dim); font-size: 12px">▼</span>
-        </div>
-      </div>
-      <div class="trace-steps" id="traceSteps-${idx}">
-        <div class="step-timeline">
-          ${(trace.steps || []).map(step => {
-    const cls = step.status === 'error' ? 'step-error' :
-      step.status === 'timeout' ? 'step-timeout' :
-        step.classification === 'WARN' ? 'step-slow' : '';
-    const icon = step.status === 'success' ? '✔' : step.status === 'timeout' ? '⏱' : '❌';
-    return `
-              <div class="step-item ${cls}">
-                <span class="step-offset">[${Math.round(step.startTime)}ms]</span>
-                <span class="step-name">${escapeHtml(step.name)}</span>
-                <div class="waterfall-container">
-                  <div class="waterfall-bar classification-${step.classification}" 
-                    style="left: ${(step.offset / trace.totalDuration) * 100}%; width: ${Math.max((step.duration / trace.totalDuration) * 100, 0.5)}%">
-                  </div>
-                </div>
-                <span class="step-status-icon">${icon}</span>
-                <span class="step-dur">${Math.round(step.duration)}ms</span>
-                ${step.service !== 'internal' ? `<span class="step-service-tag">${step.service}</span>` : ''}
-              </div>
-              ${step.error ? `<div class="step-item" style="padding-left: 92px; color: var(--red); font-size: 11px">└─ ${escapeHtml(step.error)}</div>` : ''}
-              ${step.errorFile ? `<div class="step-item" style="padding-left: 92px; color: var(--purple); font-size: 10px; font-family: monospace">   📄 ${escapeHtml(step.errorFile)}${step.errorLine ? `:${step.errorLine}` : ''}</div>` : ''}
-            `;
-  }).join('')}
-        </div>
-        ${trace.rootCause ? `
-          <div class="root-cause-box">
-            <div class="rc-label">🔍 Root Cause</div>
-            <div class="rc-detail">${escapeHtml(trace.rootCause.cause)} · Service: ${trace.rootCause.service} · Confidence: ${trace.rootCause.confidence}%</div>
-          </div>
-        ` : ''}
-        ${trace.requestData ? `
-          <div class="replay-section">
-            <button class="replay-btn" onclick="replayRequest('${trace.traceId}')">🔄 Replay Request</button>
-            <span class="replay-hint">Captured body & headers available</span>
-          </div>
-        ` : ''}
-      </div>
-    </div>
-  `).join('')}</div>`;
-}
-
-async function replayRequest(traceId) {
-  if (!confirm(`Replay request ${traceId}? This will re-trigger the endpoint on the server.`)) return;
-
-  try {
-    const res = await fetch(`/__debugger/replay?traceId=${traceId}`);
-    const data = await res.json();
-    alert(`Replay status: ${data.status}\nTarget: ${data.target}\n${data.info}`);
-  } catch (err) {
-    alert('Replay failed: ' + err.message);
-  }
-}
-
-function toggleTrace(idx) {
-  const el = document.getElementById(`traceSteps-${idx}`);
-  if (el) el.classList.toggle('open');
-}
-
-// ─── Utilities ────────────────────────────────────────────
-function escapeHtml(str) {
-  if (!str) return '';
-  return String(str)
-    .replace(/&/g, '&amp;')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-    .replace(/"/g, '&quot;');
-}
-
-function formatNumber(n) {
-  if (n >= 1000000) return (n / 1000000).toFixed(1) + 'M';
-  if (n >= 1000) return (n / 1000).toFixed(1) + 'K';
-  return String(n);
-}
-
-async function performSearch() {
-  const query = document.getElementById('searchInput').value.trim();
-  const env = document.getElementById('envFilter').value;
-  const resultsDiv = document.getElementById('searchResults');
-
-  if (!query) {
-    resultsDiv.innerHTML = '<div class="empty-state">Enter a search term</div>';
-    return;
-  }
-
-  try {
-    const url = `/__debugger/search?q=${encodeURIComponent(query)}${env ? `&env=${env}` : ''}`;
-    const res = await fetch(url);
-    const data = await res.json();
-
-    if (data.error) {
-      resultsDiv.innerHTML = `<div class="empty-state">${data.error}</div>`;
-      return;
-    }
-
-    if (!data.results || data.results.length === 0) {
-      resultsDiv.innerHTML = '<div class="empty-state">No results found</div>';
-      return;
-    }
-
-    // Render results using same trace rendering logic
-    resultsDiv.innerHTML = `
-            <div style="margin-bottom: 12px; color: var(--text-dim); font-size: 13px;">
-                Found ${data.count} result${data.count !== 1 ? 's' : ''} for "${escapeHtml(query)}"
-            </div>
-            <div class="trace-list">${data.results.map((trace, idx) => {
-      const hasPayload = trace.payloadSize && trace.payloadSize > 0;
-      const payloadMB = hasPayload ? (trace.payloadSize / (1024 * 1024)).toFixed(2) : null;
-      return `
-                <div class="trace-item">
-                    <div class="trace-header" onclick="toggleSearchTrace(${idx})">
-                        <div class="trace-header-left">
-                            <span class="method-badge method-${trace.method}">${trace.method}</span>
-                            <span class="trace-endpoint">${escapeHtml(trace.endpoint)}</span>
-                            <span class="trace-id">${trace.traceId}</span>
-                            <span class="badge" style="background: rgba(124, 58, 237, 0.1); color: var(--accent-light); font-size: 10px; border: 1px solid var(--border)">${trace.language === 'python' ? 'Python' : 'Node'}</span>
-                            ${trace.environment ? `<span class="badge" style="background: rgba(124,58,237,0.2); color: var(--purple); font-size: 10px; padding: 2px 6px;">${trace.environment}</span>` : ''}
-                            ${hasPayload && payloadMB > 1 ? `<span class="badge" style="background: rgba(251,191,36,0.2); color: var(--yellow); font-size: 10px; padding: 2px 6px;">📦 ${payloadMB}MB</span>` : ''}
-                        </div>
-                        <div class="trace-header-right">
-                            <span class="classification-badge classification-${trace.classification}">${trace.classification}</span>
-                            <span class="trace-dur">${Math.round(trace.totalDuration)}ms</span>
-                            <span style="color: var(--text-dim); font-size: 12px">▼</span>
-                        </div>
-                    </div>
-                    <div class="trace-steps" id="searchTraceSteps-${idx}">
-                        <div class="step-timeline">
-                            ${(trace.steps || []).map(step => {
-        const cls = step.status === 'error' ? 'step-error' :
-          step.status === 'timeout' ? 'step-timeout' :
-            step.classification === 'WARN' ? 'step-slow' : '';
-        const icon = step.status === 'success' ? '✔' : step.status === 'timeout' ? '⏱' : '❌';
-        return `
-                                    <div class="step-item ${cls}">
-                                        <span class="step-offset">[${Math.round(step.startTime)}ms]</span>
-                                        <span class="step-name">${escapeHtml(step.name)}</span>
-                                        <div class="waterfall-container">
-                                          <div class="waterfall-bar classification-${step.classification}" 
-                                            style="left: ${(step.offset / trace.totalDuration) * 100}%; width: ${Math.max((step.duration / trace.totalDuration) * 100, 0.5)}%">
-                                          </div>
-                                        </div>
-                                        <span class="step-status-icon">${icon}</span>
-                                        <span class="step-dur">${Math.round(step.duration)}ms</span>
-                                        ${step.service !== 'internal' ? `<span class="step-service-tag">${step.service}</span>` : ''}
-                                    </div>
-                                    ${step.error ? `<div class="step-item" style="padding-left: 92px; color: var(--red); font-size: 11px">└─ ${escapeHtml(step.error)}</div>` : ''}
-                                    ${step.errorFile ? `<div class="step-item" style="padding-left: 92px; color: var(--purple); font-size: 10px; font-family: monospace">   📄 ${escapeHtml(step.errorFile)}${step.errorLine ? `:${step.errorLine}` : ''}</div>` : ''}
-                                `;
-      }).join('')}
-                        </div>
-                        ${trace.rootCause ? `
-                            <div class="root-cause-box">
-                                <div class="rc-label">🔍 Root Cause</div>
-                                <div class="rc-detail">${escapeHtml(trace.rootCause.cause)} · Service: ${trace.rootCause.service} · Confidence: ${trace.rootCause.confidence}%</div>
-                            </div>
-                        ` : ''}
-                        ${trace.requestData ? `
-                          <div class="replay-section">
-                            <button class="replay-btn" onclick="replayRequest('${trace.traceId}')">🔄 Replay Request</button>
-                          </div>
-                        ` : ''}
-                    </div>
-                </div>
-            `;
-    }).join('')}</div>
-        `;
-  } catch (err) {
-    resultsDiv.innerHTML = '<div class="empty-state">Search failed</div>';
-  }
-}
-
-function toggleSearchTrace(idx) {
-  const el = document.getElementById(`searchTraceSteps-${idx}`);
-  if (el) el.classList.toggle('open');
-}
-
-function formatDuration(ms) {
-  const secs = Math.floor(ms / 1000);
-  if (secs < 60) return secs + 's';
-  const mins = Math.floor(secs / 60);
-  if (mins < 60) return mins + 'm ' + (secs % 60) + 's';
-  const hrs = Math.floor(mins / 60);
-  return hrs + 'h ' + (mins % 60) + 'm';
-}
-
-function seedSampleData(data) {
-  return {
-    ...data,
-    uptime: 124000,
-    totalRequests: 1,
-    totalErrors: 0,
-    totalSlow: 0,
-    serviceHealth: [
-      { name: 'mongo', status: 'healthy', successRate: 100, totalChecks: 12 },
-      { name: 'redis', status: 'degraded', successRate: 92, totalChecks: 45 },
-      { name: 'postgres', status: 'healthy', successRate: 100, totalChecks: 5 }
-    ],
-    endpoints: [
-      { method: 'GET', path: '/api/users', totalRequests: 1, errorCount: 0, slowCount: 0, avgDuration: 42, p95Duration: 42, maxDuration: 42, commonIssues: [] }
-    ],
-    recentTraces: [
-      {
-        traceId: 'sample_trace_123',
-        endpoint: '/api/users',
-        method: 'GET',
-        totalDuration: 156,
-        classification: 'INFO',
-        language: 'node',
-        steps: [
-          { name: 'Auth Check', service: 'internal', status: 'success', classification: 'INFO', startTime: 2, endTime: 12, duration: 10, offset: 2 },
-          { name: 'DB Find User', service: 'mongo', status: 'success', classification: 'INFO', startTime: 15, endTime: 145, duration: 130, offset: 15 },
-          { name: 'Redis Cache', service: 'redis', status: 'success', classification: 'INFO', startTime: 148, endTime: 155, duration: 7, offset: 148 }
-        ]
-      }
-    ]
-  };
-}
-
+// ─────────────────────────────────────────────────────────────
+// flow-debugger — Dashboard App
+// Fetches analytics from /__debugger API and renders live UI
+// ─────────────────────────────────────────────────────────────
+
+const API_URL = '/__debugger';
+let autoRefresh = true;
+let refreshInterval = null;
+
+// ─── Init ─────────────────────────────────────────────────
+document.addEventListener('DOMContentLoaded', () => {
+  refreshData();
+  startAutoRefresh();
+});
+
+function startAutoRefresh() {
+  if (refreshInterval) clearInterval(refreshInterval);
+  refreshInterval = setInterval(refreshData, 3000);
+}
+
+function toggleAutoRefresh() {
+  autoRefresh = !autoRefresh;
+  const btn = document.getElementById('autoRefreshBtn');
+  if (autoRefresh) {
+    btn.textContent = 'Auto: ON';
+    startAutoRefresh();
+  } else {
+    btn.textContent = 'Auto: OFF';
+    if (refreshInterval) clearInterval(refreshInterval);
+  }
+}
+
+async function refreshData() {
+  try {
+    const res = await fetch(API_URL);
+    if (!res.ok) throw new Error('API error');
+    const data = await res.json();
+
+    // Seed sample data if empty for a better first-look experience
+    if (!data.totalRequests || data.totalRequests === 0) {
+      const seededData = seedSampleData(data);
+      renderDashboard(seededData);
+    } else {
+      renderDashboard(data);
+    }
+  } catch (err) {
+    document.getElementById('statusBadge').textContent = '● OFFLINE';
+    document.getElementById('statusBadge').className = 'badge badge-offline';
+  }
+}
+
+// ─── Render ───────────────────────────────────────────────
+function renderDashboard(data) {
+  // Status
+  document.getElementById('statusBadge').textContent = '● LIVE';
+  document.getElementById('statusBadge').className = 'badge badge-live';
+
+  // Uptime
+  const uptimeMs = data.uptime || 0;
+  document.getElementById('uptime').textContent = `Uptime: ${formatDuration(uptimeMs)}`;
+
+  // Stats
+  document.getElementById('totalRequests').textContent = formatNumber(data.totalRequests || 0);
+  document.getElementById('totalErrors').textContent = formatNumber(data.totalErrors || 0);
+  document.getElementById('totalSlow').textContent = formatNumber(data.totalSlow || 0);
+
+  const total = data.totalRequests || 0;
+  const errors = data.totalErrors || 0;
+  const rate = total > 0 ? Math.round(((total - errors) / total) * 100) : 100;
+  document.getElementById('successRate').textContent = rate + '%';
+
+  // Panels
+  renderHealthPanel(data.serviceHealth || []);
+  renderFailuresPanel(data.topFailures || []);
+  renderEndpointsTable(data.endpoints || []);
+  renderSlowQueries(data.recentTraces || []);
+  renderRecentTraces(data.recentTraces || []);
+}
+
+// ─── Health Panel ─────────────────────────────────────────
+function renderHealthPanel(health) {
+  const panel = document.getElementById('healthPanel');
+  if (!health.length) {
+    panel.innerHTML = '<div class="empty-state">No services detected yet</div>';
+    return;
+  }
+
+  panel.innerHTML = `<div class="health-grid">${health.map(h => `
+    <div class="health-pill">
+      <div class="health-dot ${h.status}"></div>
+      <div class="health-info">
+        <span class="health-name">${escapeHtml(h.name)}</span>
+        <span class="health-rate">${h.successRate}% success · ${h.totalChecks} checks</span>
+      </div>
+    </div>
+  `).join('')}</div>`;
+}
+
+// ─── Failures Panel ───────────────────────────────────────
+function renderFailuresPanel(failures) {
+  const panel = document.getElementById('failuresPanel');
+  if (!failures.length) {
+    panel.innerHTML = '<div class="empty-state">No failures recorded</div>';
+    return;
+  }
+
+  const maxPct = Math.max(...failures.map(f => f.percentage), 1);
+
+  panel.innerHTML = `<div class="failure-bar-group">${failures.map(f => `
+    <div class="failure-item">
+      <span class="failure-label">${escapeHtml(f.service)}</span>
+      <div class="failure-bar-bg">
+        <div class="failure-bar" style="width: ${(f.percentage / maxPct) * 100}%"></div>
+      </div>
+      <span class="failure-pct">${f.percentage}%</span>
+    </div>
+  `).join('')}</div>`;
+}
+
+// ─── Endpoints Table ──────────────────────────────────────
+function renderEndpointsTable(endpoints) {
+  const tbody = document.getElementById('endpointsTable');
+  if (!endpoints.length) {
+    tbody.innerHTML = '<tr><td colspan="9" class="empty-state">No endpoints tracked yet</td></tr>';
+    return;
+  }
+
+  tbody.innerHTML = endpoints.map(ep => `
+    <tr>
+      <td><span class="method-badge method-${ep.method}">${ep.method}</span></td>
+      <td><span class="endpoint-path">${escapeHtml(ep.path)}</span></td>
+      <td class="td-mono">${formatNumber(ep.totalRequests)}</td>
+      <td class="td-mono" style="color: ${ep.errorCount > 0 ? 'var(--red)' : 'inherit'}">${ep.errorCount}</td>
+      <td class="td-mono" style="color: ${ep.slowCount > 0 ? 'var(--yellow)' : 'inherit'}">${ep.slowCount}</td>
+      <td class="td-mono">${Math.round(ep.avgDuration)}</td>
+      <td class="td-mono">${Math.round(ep.p95Duration)}</td>
+      <td class="td-mono">${Math.round(ep.maxDuration)}</td>
+      <td>${(ep.commonIssues || []).slice(0, 2).map(i => `<span class="issue-tag">${escapeHtml(i)}</span>`).join('') || '—'}</td>
+    </tr>
+  `).join('');
+}
+
+// ─── Slow Queries ─────────────────────────────────────────
+function renderSlowQueries(traces) {
+  const container = document.getElementById('slowQueries');
+  const slowSteps = [];
+
+  for (const trace of traces) {
+    for (const step of (trace.steps || [])) {
+      if (step.classification === 'WARN' && step.duration > 300 && step.metadata?.sql) {
+        slowSteps.push({
+          sql: step.metadata.sql,
+          duration: step.duration,
+          service: step.service,
+          endpoint: trace.endpoint,
+        });
+      }
+    }
+  }
+
+  if (!slowSteps.length) {
+    container.innerHTML = '<div class="empty-state">No slow queries detected</div>';
+    return;
+  }
+
+  container.innerHTML = `<div class="slow-query-list">${slowSteps.slice(0, 10).map(sq => `
+    <div class="slow-query-item">
+      <span class="slow-query-icon">⚠</span>
+      <span class="slow-query-sql">${escapeHtml(sq.sql)}</span>
+      <span class="slow-query-dur">${Math.round(sq.duration)}ms</span>
+    </div>
+  `).join('')}</div>`;
+}
+
+// ─── Recent Traces ────────────────────────────────────────
+function renderRecentTraces(traces) {
+  const container = document.getElementById('recentTraces');
+  if (!traces.length) {
+    container.innerHTML = '<div class="empty-state">No traces recorded yet</div>';
+    return;
+  }
+
+  container.innerHTML = `<div class="trace-list">${traces.slice(0, 15).map((trace, idx) => `
+    <div class="trace-item">
+      <div class="trace-header" onclick="toggleTrace(${idx})">
+        <div class="trace-header-left">
+          <span class="method-badge method-${trace.method}">${trace.method}</span>
+          <span class="trace-endpoint">${escapeHtml(trace.endpoint)}</span>
+          <span class="trace-id">${trace.traceId}</span>
+          <span class="badge" style="background: rgba(124, 58, 237, 0.1); color: var(--accent-light); font-size: 10px; border: 1px solid var(--border)">${trace.language === 'python' ? 'Python' : 'Node'}</span>
+        </div>
+        <div class="trace-header-right">
+          <span class="classification-badge classification-${trace.classification}">${trace.classification}</span>
+          <span class="trace-dur">${Math.round(trace.totalDuration)}ms</span>
+          <span style="color: var(--text-dim); font-size: 12px">▼</span>
+        </div>
+      </div>
+      <div class="trace-steps" id="traceSteps-${idx}">
+        <div class="step-timeline">
+          ${(trace.steps || []).map(step => {
+    const cls = step.status === 'error' ? 'step-error' :
+      step.status === 'timeout' ? 'step-timeout' :
+        step.classification === 'WARN' ? 'step-slow' : '';
+    const icon = step.status === 'success' ? '✔' : step.status === 'timeout' ? '⏱' : '❌';
+    return `
+              <div class="step-item ${cls}">
+                <span class="step-offset">[${Math.round(step.startTime)}ms]</span>
+                <span class="step-name">${escapeHtml(step.name)}</span>
+                <div class="waterfall-container">
+                  <div class="waterfall-bar classification-${step.classification}" 
+                    style="left: ${(step.offset / trace.totalDuration) * 100}%; width: ${Math.max((step.duration / trace.totalDuration) * 100, 0.5)}%">
+                  </div>
+                </div>
+                <span class="step-status-icon">${icon}</span>
+                <span class="step-dur">${Math.round(step.duration)}ms</span>
+                ${step.service !== 'internal' ? `<span class="step-service-tag">${step.service}</span>` : ''}
+              </div>
+              ${step.error ? `<div class="step-item" style="padding-left: 92px; color: var(--red); font-size: 11px">└─ ${escapeHtml(step.error)}</div>` : ''}
+              ${step.errorFile ? `<div class="step-item" style="padding-left: 92px; color: var(--purple); font-size: 10px; font-family: monospace">   📄 ${escapeHtml(step.errorFile)}${step.errorLine ? `:${step.errorLine}` : ''}</div>` : ''}
+            `;
+  }).join('')}
+        </div>
+        ${trace.rootCause ? `
+          <div class="root-cause-box">
+            <div class="rc-label">🔍 Root Cause</div>
+            <div class="rc-detail">${escapeHtml(trace.rootCause.cause)} · Service: ${trace.rootCause.service} · Confidence: ${trace.rootCause.confidence}%</div>
+            ${trace.rootCause.suggestions ? `
+              <div class="rc-suggestions" style="margin-top: 8px; font-size: 11px; color: var(--blue);">
+                <strong>💡 Suggestions:</strong>
+                <ul style="margin: 4px 0 0 16px; padding: 0;">
+                  ${trace.rootCause.suggestions.map(s => `<li>${escapeHtml(s)}</li>`).join('')}
+                </ul>
+              </div>
+            ` : ''}
+          </div>
+        ` : ''}
+        ${trace.requestData ? `
+          <div class="replay-section">
+            <button class="replay-btn" onclick="replayRequest('${trace.traceId}')">🔄 Replay Request</button>
+            <span class="replay-hint">Captured body & headers available</span>
+          </div>
+        ` : ''}
+        ${trace.responseData || (trace.steps || []).some(s => s.name === 'Response Body') ? `
+          <div class="response-viewer-section">
+            ${renderResponseBody(trace)}
+          </div>
+        ` : ''}
+        ${trace.classification === 'ERROR' || trace.classification === 'CRITICAL' ? `
+          <div class="error-viewer-section">
+            ${renderErrorDetails(trace)}
+          </div>
+        ` : ''}
+      </div>
+    </div>
+  `).join('')}</div>`;
+}
+
+async function replayRequest(traceId) {
+  if (!confirm(`Replay request ${traceId}? This will re-trigger the endpoint on the server.`)) return;
+
+  try {
+    const res = await fetch(`/__debugger/replay?traceId=${traceId}`);
+    const data = await res.json();
+    alert(`Replay status: ${data.status}\nTarget: ${data.target}\n${data.info}`);
+  } catch (err) {
+    alert('Replay failed: ' + err.message);
+  }
+}
+
+function toggleTrace(idx) {
+  const el = document.getElementById(`traceSteps-${idx}`);
+  if (el) el.classList.toggle('open');
+}
+
+// ─── Utilities ────────────────────────────────────────────
+function escapeHtml(str) {
+  if (!str) return '';
+  return String(str)
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;');
+}
+
+function formatNumber(n) {
+  if (n >= 1000000) return (n / 1000000).toFixed(1) + 'M';
+  if (n >= 1000) return (n / 1000).toFixed(1) + 'K';
+  return String(n);
+}
+
+// ✅ NEW: Render response body viewer (Phase 3)
+function renderResponseBody(trace) {
+  // Look for response body in steps
+  const responseStep = (trace.steps || []).find(s => s.name === 'Response Body');
+  if (!responseStep) return '';
+  
+  const body = responseStep.metadata?.body || responseStep.body;
+  if (!body) return '';
+  
+  const size = responseStep.size || JSON.stringify(body).length;
+  const statusCode = responseStep.statusCode || trace.statusCode;
+  
+  return `
+    <div class="response-body-section" style="margin-top: 16px; padding: 16px; background: rgba(16, 185, 129, 0.05); border: 1px solid rgba(16, 185, 129, 0.2); border-radius: 8px;">
+      <h4 style="margin: 0 0 12px 0; color: var(--green); font-size: 13px; font-weight: 600;">
+        📤 Response Body
+      </h4>
+      <div style="display: flex; gap: 16px; margin-bottom: 12px; font-size: 12px; color: var(--text-dim);">
+        <span>Status: <strong style="color: var(--green)">${statusCode}</strong></span>
+        <span>Size: <strong>${size} bytes</strong></span>
+      </div>
+      <pre style="background: rgba(0,0,0,0.3); padding: 12px; border-radius: 6px; overflow-x: auto; font-size: 11px; color: var(--green); max-height: 400px; overflow-y: auto;">${escapeHtml(JSON.stringify(body, null, 2))}</pre>
+    </div>
+  `;
+}
+
+// ✅ NEW: Render error details with suggestions (Phase 3)
+function renderErrorDetails(trace) {
+  const errorStep = (trace.steps || []).find(s => s.status === 'error' || s.status === 'timeout');
+  if (!errorStep) return '';
+  
+  const errorDetails = errorStep.metadata?.errorDetails;
+  
+  return `
+    <div class="error-details-section" style="margin-top: 16px; padding: 16px; background: rgba(239, 68, 68, 0.05); border: 1px solid rgba(239, 68, 68, 0.2); border-radius: 8px;">
+      <h4 style="margin: 0 0 12px 0; color: var(--red); font-size: 13px; font-weight: 600;">
+        🔴 Error Details
+      </h4>
+      <div style="margin-bottom: 12px;">
+        <div style="font-size: 12px; color: var(--text-dim); margin-bottom: 4px;">Error:</div>
+        <div style="font-size: 13px; color: var(--red); font-family: monospace;">${escapeHtml(errorStep.error || 'Unknown error')}</div>
+      </div>
+      ${errorDetails ? `
+        <div style="margin-bottom: 12px;">
+          <div style="font-size: 12px; color: var(--text-dim); margin-bottom: 4px;">Type:</div>
+          <div style="font-size: 13px; color: var(--text);">${escapeHtml(errorDetails.type || 'Error')}</div>
+        </div>
+        ${errorDetails.code ? `
+          <div style="margin-bottom: 12px;">
+            <div style="font-size: 12px; color: var(--text-dim); margin-bottom: 4px;">Code:</div>
+            <div style="font-size: 13px; color: var(--yellow); font-family: monospace;">${escapeHtml(errorDetails.code)}</div>
+          </div>
+        ` : ''}
+        ${errorDetails.stack ? `
+          <div style="margin-bottom: 12px;">
+            <div style="font-size: 12px; color: var(--text-dim); margin-bottom: 4px;">Stack Trace:</div>
+            <pre style="background: rgba(0,0,0,0.3); padding: 12px; border-radius: 6px; overflow-x: auto; font-size: 10px; color: var(--red); max-height: 200px; overflow-y: auto; font-family: monospace;">${escapeHtml(errorDetails.stack)}</pre>
+          </div>
+        ` : ''}
+      ` : ''}
+      ${trace.rootCause?.suggestions ? `
+        <div style="margin-top: 16px; padding: 12px; background: rgba(59, 130, 246, 0.05); border: 1px solid rgba(59, 130, 246, 0.2); border-radius: 6px;">
+          <div style="font-size: 12px; color: var(--blue); font-weight: 600; margin-bottom: 8px;">💡 Suggestions:</div>
+          <ul style="margin: 0; padding-left: 20px; font-size: 12px; color: var(--text);">
+            ${trace.rootCause.suggestions.map(s => `<li style="margin-bottom: 4px;">${escapeHtml(s)}</li>`).join('')}
+          </ul>
+        </div>
+      ` : ''}
+    </div>
+  `;
+}
+
+async function performSearch() {
+  const query = document.getElementById('searchInput').value.trim();
+  const env = document.getElementById('envFilter').value;
+  const resultsDiv = document.getElementById('searchResults');
+
+  if (!query) {
+    resultsDiv.innerHTML = '<div class="empty-state">Enter a search term</div>';
+    return;
+  }
+
+  try {
+    const url = `/__debugger/search?q=${encodeURIComponent(query)}${env ? `&env=${env}` : ''}`;
+    const res = await fetch(url);
+    const data = await res.json();
+
+    if (data.error) {
+      resultsDiv.innerHTML = `<div class="empty-state">${data.error}</div>`;
+      return;
+    }
+
+    if (!data.results || data.results.length === 0) {
+      resultsDiv.innerHTML = '<div class="empty-state">No results found</div>';
+      return;
+    }
+
+    // Render results using same trace rendering logic
+    resultsDiv.innerHTML = `
+            <div style="margin-bottom: 12px; color: var(--text-dim); font-size: 13px;">
+                Found ${data.count} result${data.count !== 1 ? 's' : ''} for "${escapeHtml(query)}"
+            </div>
+            <div class="trace-list">${data.results.map((trace, idx) => {
+      const hasPayload = trace.payloadSize && trace.payloadSize > 0;
+      const payloadMB = hasPayload ? (trace.payloadSize / (1024 * 1024)).toFixed(2) : null;
+      return `
+                <div class="trace-item">
+                    <div class="trace-header" onclick="toggleSearchTrace(${idx})">
+                        <div class="trace-header-left">
+                            <span class="method-badge method-${trace.method}">${trace.method}</span>
+                            <span class="trace-endpoint">${escapeHtml(trace.endpoint)}</span>
+                            <span class="trace-id">${trace.traceId}</span>
+                            <span class="badge" style="background: rgba(124, 58, 237, 0.1); color: var(--accent-light); font-size: 10px; border: 1px solid var(--border)">${trace.language === 'python' ? 'Python' : 'Node'}</span>
+                            ${trace.environment ? `<span class="badge" style="background: rgba(124,58,237,0.2); color: var(--purple); font-size: 10px; padding: 2px 6px;">${trace.environment}</span>` : ''}
+                            ${hasPayload && payloadMB > 1 ? `<span class="badge" style="background: rgba(251,191,36,0.2); color: var(--yellow); font-size: 10px; padding: 2px 6px;">📦 ${payloadMB}MB</span>` : ''}
+                        </div>
+                        <div class="trace-header-right">
+                            <span class="classification-badge classification-${trace.classification}">${trace.classification}</span>
+                            <span class="trace-dur">${Math.round(trace.totalDuration)}ms</span>
+                            <span style="color: var(--text-dim); font-size: 12px">▼</span>
+                        </div>
+                    </div>
+                    <div class="trace-steps" id="searchTraceSteps-${idx}">
+                        <div class="step-timeline">
+                            ${(trace.steps || []).map(step => {
+        const cls = step.status === 'error' ? 'step-error' :
+          step.status === 'timeout' ? 'step-timeout' :
+            step.classification === 'WARN' ? 'step-slow' : '';
+        const icon = step.status === 'success' ? '✔' : step.status === 'timeout' ? '⏱' : '❌';
+        return `
+                                    <div class="step-item ${cls}">
+                                        <span class="step-offset">[${Math.round(step.startTime)}ms]</span>
+                                        <span class="step-name">${escapeHtml(step.name)}</span>
+                                        <div class="waterfall-container">
+                                          <div class="waterfall-bar classification-${step.classification}" 
+                                            style="left: ${(step.offset / trace.totalDuration) * 100}%; width: ${Math.max((step.duration / trace.totalDuration) * 100, 0.5)}%">
+                                          </div>
+                                        </div>
+                                        <span class="step-status-icon">${icon}</span>
+                                        <span class="step-dur">${Math.round(step.duration)}ms</span>
+                                        ${step.service !== 'internal' ? `<span class="step-service-tag">${step.service}</span>` : ''}
+                                    </div>
+                                    ${step.error ? `<div class="step-item" style="padding-left: 92px; color: var(--red); font-size: 11px">└─ ${escapeHtml(step.error)}</div>` : ''}
+                                    ${step.errorFile ? `<div class="step-item" style="padding-left: 92px; color: var(--purple); font-size: 10px; font-family: monospace">   📄 ${escapeHtml(step.errorFile)}${step.errorLine ? `:${step.errorLine}` : ''}</div>` : ''}
+                                `;
+      }).join('')}
+                        </div>
+                        ${trace.rootCause ? `
+                            <div class="root-cause-box">
+                                <div class="rc-label">🔍 Root Cause</div>
+                                <div class="rc-detail">${escapeHtml(trace.rootCause.cause)} · Service: ${trace.rootCause.service} · Confidence: ${trace.rootCause.confidence}%</div>
+                            </div>
+                        ` : ''}
+                        ${trace.requestData ? `
+                          <div class="replay-section">
+                            <button class="replay-btn" onclick="replayRequest('${trace.traceId}')">🔄 Replay Request</button>
+                          </div>
+                        ` : ''}
+                    </div>
+                </div>
+            `;
+    }).join('')}</div>
+        `;
+  } catch (err) {
+    resultsDiv.innerHTML = '<div class="empty-state">Search failed</div>';
+  }
+}
+
+function toggleSearchTrace(idx) {
+  const el = document.getElementById(`searchTraceSteps-${idx}`);
+  if (el) el.classList.toggle('open');
+}
+
+function formatDuration(ms) {
+  const secs = Math.floor(ms / 1000);
+  if (secs < 60) return secs + 's';
+  const mins = Math.floor(secs / 60);
+  if (mins < 60) return mins + 'm ' + (secs % 60) + 's';
+  const hrs = Math.floor(mins / 60);
+  return hrs + 'h ' + (mins % 60) + 'm';
+}
+
+function seedSampleData(data) {
+  return {
+    ...data,
+    uptime: 124000,
+    totalRequests: 1,
+    totalErrors: 0,
+    totalSlow: 0,
+    serviceHealth: [
+      { name: 'mongo', status: 'healthy', successRate: 100, totalChecks: 12 },
+      { name: 'redis', status: 'degraded', successRate: 92, totalChecks: 45 },
+      { name: 'postgres', status: 'healthy', successRate: 100, totalChecks: 5 }
+    ],
+    endpoints: [
+      { method: 'GET', path: '/api/users', totalRequests: 1, errorCount: 0, slowCount: 0, avgDuration: 42, p95Duration: 42, maxDuration: 42, commonIssues: [] }
+    ],
+    recentTraces: [
+      {
+        traceId: 'sample_trace_123',
+        endpoint: '/api/users',
+        method: 'GET',
+        totalDuration: 156,
+        classification: 'INFO',
+        language: 'node',
+        steps: [
+          { name: 'Auth Check', service: 'internal', status: 'success', classification: 'INFO', startTime: 2, endTime: 12, duration: 10, offset: 2 },
+          { name: 'DB Find User', service: 'mongo', status: 'success', classification: 'INFO', startTime: 15, endTime: 145, duration: 130, offset: 15 },
+          { name: 'Redis Cache', service: 'redis', status: 'success', classification: 'INFO', startTime: 148, endTime: 155, duration: 7, offset: 148 }
+        ]
+      }
+    ]
+  };
+}
+