flow-debugger 1.0.0

package/dashboard/app.js

@@ -0,0 +1,339 @@
+// ─────────────────────────────────────────────────────────────
+// 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();
+    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>
+        </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>
+                <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>
+        ` : ''}
+      </div>
+    </div>
+  `).join('')}</div>`;
+}
+
+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>
+                            ${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>
+                                        <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>
+                        ` : ''}
+                    </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';
+}

package/dashboard/index.html

@@ -0,0 +1,168 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Flow Debugger — Dashboard</title>
+  <link rel="stylesheet" href="/__debugger/dashboard/style.css">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link
+    href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap"
+    rel="stylesheet">
+</head>
+
+<body>
+  <!-- Header -->
+  <header class="header">
+    <div class="header-left">
+      <div class="logo">
+        <span class="logo-icon">🔍</span>
+        <h1>Flow Debugger</h1>
+      </div>
+      <span class="badge badge-live" id="statusBadge">● LIVE</span>
+    </div>
+    <div class="header-right">
+      <span class="uptime" id="uptime">Uptime: --</span>
+      <button class="btn btn-ghost" onclick="refreshData()">↻ Refresh</button>
+      <button class="btn btn-ghost" id="autoRefreshBtn" onclick="toggleAutoRefresh()">Auto: ON</button>
+    </div>
+  </header>
+
+  <!-- Stats Row -->
+  <section class="stats-row" id="statsRow">
+    <div class="stat-card">
+      <div class="stat-icon stat-icon-blue">📊</div>
+      <div class="stat-content">
+        <span class="stat-label">Total Requests</span>
+        <span class="stat-value" id="totalRequests">0</span>
+      </div>
+    </div>
+    <div class="stat-card">
+      <div class="stat-icon stat-icon-red">❌</div>
+      <div class="stat-content">
+        <span class="stat-label">Errors</span>
+        <span class="stat-value stat-error" id="totalErrors">0</span>
+      </div>
+    </div>
+    <div class="stat-card">
+      <div class="stat-icon stat-icon-yellow">⚠</div>
+      <div class="stat-content">
+        <span class="stat-label">Slow Requests</span>
+        <span class="stat-value stat-warn" id="totalSlow">0</span>
+      </div>
+    </div>
+    <div class="stat-card">
+      <div class="stat-icon stat-icon-green">✔</div>
+      <div class="stat-content">
+        <span class="stat-label">Success Rate</span>
+        <span class="stat-value stat-success" id="successRate">100%</span>
+      </div>
+    </div>
+  </section>
+
+  <!-- Main Grid -->
+  <section class="main-grid">
+    <!-- Service Health Panel -->
+    <div class="card">
+      <div class="card-header">
+        <h2>🏥 Service Health</h2>
+      </div>
+      <div class="card-body" id="healthPanel">
+        <div class="empty-state">No services detected yet</div>
+      </div>
+    </div>
+
+    <!-- Top Failures Panel -->
+    <div class="card">
+      <div class="card-header">
+        <h2>🔥 Top Failures by Service</h2>
+      </div>
+      <div class="card-body" id="failuresPanel">
+        <div class="empty-state">No failures recorded</div>
+      </div>
+    </div>
+  </section>
+
+  <!-- Endpoints Table -->
+  <section class="card full-width">
+    <div class="card-header">
+      <h2>📡 Endpoint Analytics</h2>
+    </div>
+    <div class="card-body">
+      <div class="table-container">
+        <table class="data-table">
+          <thead>
+            <tr>
+              <th>Method</th>
+              <th>Endpoint</th>
+              <th>Requests</th>
+              <th>Errors</th>
+              <th>Slow</th>
+              <th>Avg (ms)</th>
+              <th>P95 (ms)</th>
+              <th>Max (ms)</th>
+              <th>Common Issues</th>
+            </tr>
+          </thead>
+          <tbody id="endpointsTable">
+            <tr>
+              <td colspan="9" class="empty-state">No endpoints tracked yet</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </section>
+
+  <!-- Slow Query Log -->
+  <section class="card full-width">
+    <div class="card-header">
+      <h2>🐌 Slow Queries Detected</h2>
+    </div>
+    <div class="card-body" id="slowQueries">
+      <div class="empty-state">No slow queries detected</div>
+    </div>
+  </section>
+
+  <!-- Search Section -->
+  <section class="card full-width">
+    <div class="card-header">
+      <h2>🔍 Search Traces</h2>
+    </div>
+    <div class="card-body">
+      <div style="display: flex; gap: 12px; margin-bottom: 16px;">
+        <input type="text" id="searchInput" placeholder="Search by traceId, endpoint, or error message..."
+          style="flex: 1; padding: 10px 14px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; color: #e0e0e0; font-size: 14px;"
+          onkeypress="if(event.key==='Enter') performSearch()" />
+        <select id="envFilter"
+          style="padding: 10px 14px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; color: #e0e0e0; font-size: 14px;">
+          <option value="">All Environments</option>
+          <option value="development">Development</option>
+          <option value="staging">Staging</option>
+          <option value="production">Production</option>
+        </select>
+        <button class="btn btn-primary" onclick="performSearch()">Search</button>
+      </div>
+      <div id="searchResults"></div>
+    </div>
+  </section>
+
+  <!-- Recent Traces -->
+  <section class="card full-width">
+    <div class="card-header">
+      <h2>📜 Recent Request Traces</h2>
+    </div>
+    <div class="card-body" id="recentTraces">
+      <div class="empty-state">No traces recorded yet</div>
+    </div>
+  </section>
+
+  <footer class="footer">
+    <p>Flow Debugger v1.0.0 — Production-safe request tracing & analytics</p>
+  </footer>
+
+  <script src="/__debugger/dashboard/app.js"></script>
+</body>
+
+</html>