express-performance-toolkit 1.0.0 → 2.0.0

package/dashboard-ui/src/components/InsightsPanel.tsx

@@ -0,0 +1,49 @@
+import type { Insight } from "../hooks/useMetrics";
+import { Lightbulb, AlertTriangle, AlertCircle, Info, ArrowRight } from "lucide-react";
+
+export function InsightsPanel({ insights }: { insights: Insight[] }) {
+  if (!insights || insights.length === 0) {
+    return (
+      <div className="panel animate-in delay-3" style={{ marginTop: '20px' }}>
+        <div className="panel-header">
+          <div className="panel-title">✨ Smart Recommendations</div>
+        </div>
+        <div className="panel-body" style={{ textAlign: 'center', padding: '40px', color: 'var(--text-400)' }}>
+            <Lightbulb size={24} style={{ marginBottom: '12px', opacity: 0.5 }} />
+            <p>No performance issues detected. Everything looks optimal!</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="panel animate-in delay-3" style={{ marginTop: '20px' }}>
+      <div className="panel-header">
+        <div className="panel-title">✨ Smart Recommendations ({insights.length})</div>
+      </div>
+      <div className="panel-body" style={{ padding: '0px' }}>
+        <div className="insights-list">
+          {insights.map((insight, idx) => (
+            <div key={idx} className={`insight-item type-${insight.type}`}>
+               <div className="insight-icon">
+                  {insight.type === 'error' && <AlertCircle size={18} className="val-rose" />}
+                  {insight.type === 'warning' && <AlertTriangle size={18} className="val-amber" />}
+                  {insight.type === 'info' && <Info size={18} className="val-emerald" />}
+               </div>
+               <div className="insight-content">
+                  <div className="insight-title">{insight.title}</div>
+                  <div className="insight-message">{insight.message}</div>
+                  {insight.action && (
+                    <div className="insight-action">
+                       <ArrowRight size={12} style={{ marginRight: 6 }} />
+                       {insight.action}
+                    </div>
+                  )}
+               </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

package/dashboard-ui/src/components/KpiGrid.tsx

@@ -0,0 +1,178 @@
+import { Activity, Zap, AlertTriangle, Database, ShieldAlert, Server, HardDrive } from "lucide-react";
+import type { MetricsData } from "../hooks/useMetrics";
+import { fNum, fPct, fBytes } from "../utils/formatters";
+import { useState } from "react";
+import { BlockedModal } from "./BlockedModal";
+
+export function KpiGrid({ data }: { data: MetricsData }) {
+  const [isModalOpen, setModalOpen] = useState(false);
+
+  const rps =
+    data.uptime > 0
+      ? (data.totalRequests / (data.uptime / 1000)).toFixed(1)
+      : "0";
+  return (
+    <div className="kpi-grid">
+      <div className="kpi-card grad-1 animate-in delay-1">
+        <div className="kpi-title">
+          <Activity
+            size={14}
+            style={{
+              display: "inline",
+              marginRight: 6,
+              verticalAlign: "text-bottom",
+            }}
+          />{" "}
+          Total Requests
+        </div>
+        <div className="kpi-value">{fNum(data.totalRequests)}</div>
+        <div className="kpi-subtext">{rps} req/s</div>
+      </div>
+      <div className="kpi-card grad-2 animate-in delay-2">
+        <div className="kpi-title">
+          <Zap
+            size={14}
+            style={{
+              display: "inline",
+              marginRight: 6,
+              verticalAlign: "text-bottom",
+            }}
+          />{" "}
+          Avg Response Time
+        </div>
+        <div className="kpi-value">
+          {data.avgResponseTime}
+          <span style={{ fontSize: "1.25rem", color: "var(--text-300)" }}>
+            ms
+          </span>
+        </div>
+        <div className="kpi-subtext" style={{ color: "var(--accent-emerald)" }}>
+          Optimal
+        </div>
+      </div>
+      <div className="kpi-card grad-4 animate-in delay-3">
+        <div className="kpi-title">
+          <AlertTriangle
+            size={14}
+            style={{
+              display: "inline",
+              marginRight: 6,
+              verticalAlign: "text-bottom",
+            }}
+          />{" "}
+          Slow Requests
+        </div>
+        <div className="kpi-value val-rose">{fNum(data.slowRequests)}</div>
+        <div className="kpi-subtext">
+          {fPct(data.slowRequests, data.totalRequests)}% of total
+        </div>
+      </div>
+      <div className="kpi-card grad-1 animate-in delay-4">
+        <div className="kpi-title">Cache Hit Rate</div>
+        <div className="kpi-value val-emerald">
+          {data.cacheHitRate}
+          <span style={{ fontSize: "1.25rem", color: "var(--text-300)" }}>
+            %
+          </span>
+        </div>
+        <div className="kpi-subtext">{data.cacheSize} entries active</div>
+      </div>
+      <div className="kpi-card grad-3 animate-in delay-5">
+        <div className="kpi-title">
+          <Database
+            size={14}
+            style={{
+              display: "inline",
+              marginRight: 6,
+              verticalAlign: "text-bottom",
+            }}
+          />{" "}
+          N+1 Query Alerts
+        </div>
+        <div className="kpi-value val-amber">
+          {fNum(data.highQueryRequests)}
+        </div>
+        <div className="kpi-subtext">
+          <span style={{ color: "var(--text-300)" }}>
+            {fPct(data.highQueryRequests, data.totalRequests)}% of total
+          </span>
+        </div>
+      </div>
+      <div className="kpi-card grad-1 animate-in delay-5">
+        <div className="kpi-title">
+          <Server
+            size={14}
+            style={{
+              display: "inline",
+              marginRight: 6,
+              verticalAlign: "text-bottom",
+            }}
+          />{" "}
+          Network Egress
+        </div>
+        <div className="kpi-value val-emerald">
+          {fBytes(data.totalBytesSent)}
+        </div>
+        <div className="kpi-subtext">Total bytes sent</div>
+      </div>
+
+      <div className="kpi-card grad-1 animate-in delay-6">
+        <div className="kpi-title">
+          <HardDrive
+            size={14}
+            style={{
+              display: "inline",
+              marginRight: 6,
+              verticalAlign: "text-bottom",
+            }}
+          />{" "}
+          Avg Payload
+        </div>
+        <div className="kpi-value">
+          {fBytes(data.avgResponseSize)}
+        </div>
+        <div className="kpi-subtext">Per request average</div>
+      </div>
+
+      <div className="kpi-card grad-4 animate-in delay-6" style={{ position: 'relative' }}>
+        <div className="kpi-title">
+          <ShieldAlert
+            size={14}
+            style={{
+              display: "inline",
+              marginRight: 6,
+              verticalAlign: "text-bottom",
+            }}
+          />{" "}
+          Blocked Traffic
+        </div>
+        <div className="kpi-value val-rose">{fNum(data.rateLimitHits)}</div>
+        <div className="kpi-subtext" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+          <span>Rate limit 429</span>
+          {data.rateLimitHits > 0 && (
+            <button 
+              onClick={() => setModalOpen(true)}
+              style={{ 
+                background: 'rgba(244, 63, 94, 0.1)', 
+                border: '1px solid rgba(244, 63, 94, 0.2)',
+                borderRadius: '4px',
+                color: 'var(--accent-rose)',
+                padding: '2px 8px',
+                fontSize: '0.7rem',
+                cursor: 'pointer'
+              }}
+            >
+              View Details
+            </button>
+          )}
+        </div>
+      </div>
+
+      <BlockedModal 
+        isOpen={isModalOpen} 
+        onClose={() => setModalOpen(false)} 
+        events={data.blockedEvents || []} 
+      />
+    </div>
+  );
+}

package/dashboard-ui/src/components/LiveLogs.tsx

@@ -0,0 +1,76 @@
+import { useState } from 'react';
+import type { LogEntry } from '../hooks/useMetrics';
+import { fTime, getStatusClass, getTimeClass } from '../utils/formatters';
+
+export function LiveLogs({ logs }: { logs: LogEntry[] }) {
+  const [filter, setFilter] = useState<'all' | 'slow' | 'cached' | 'errors'>('all');
+
+  let filtered = logs;
+  if (filter === "slow") filtered = logs.filter((l) => l.slow);
+  else if (filter === "cached") filtered = logs.filter((l) => l.cached);
+  else if (filter === "errors") filtered = logs.filter((l) => l.statusCode >= 400);
+
+  return (
+    <div className="panel animate-in delay-5">
+      <div className="panel-header">
+        <div className="panel-title">📋 Live Request Stream</div>
+        <div className="filters">
+          <button className={`filter-btn ${filter === 'all' ? 'active' : ''}`} onClick={() => setFilter('all')}>All</button>
+          <button className={`filter-btn ${filter === 'slow' ? 'active' : ''}`} onClick={() => setFilter('slow')}>
+            <span className="fire-icon">🔥</span> Slow
+          </button>
+          <button className={`filter-btn ${filter === 'cached' ? 'active' : ''}`} onClick={() => setFilter('cached')}>Cached</button>
+          <button className={`filter-btn ${filter === 'errors' ? 'active' : ''}`} onClick={() => setFilter('errors')}>Errors</button>
+        </div>
+      </div>
+      <div className="panel-body" style={{ padding: 0, maxHeight: "500px" }}>
+        <div className="table-container">
+          <table>
+            <thead>
+              <tr>
+                <th>Timestamp</th>
+                <th>Method</th>
+                <th style={{ width: "40%" }}>Path</th>
+                <th>Status</th>
+                <th>LATENCY</th>
+                <th>Cache</th>
+                <th>Flags</th>
+              </tr>
+            </thead>
+            <tbody>
+              {filtered.length === 0 ? (
+                <tr>
+                  <td colSpan={7} className="empty-state">
+                    <div className="empty-icon">✨</div><p>No matching requests found</p>
+                  </td>
+                </tr>
+              ) : (
+                filtered.sort((a,b) => b.timestamp - a.timestamp).map((log, i) => {
+                  const flag = log.slow 
+                    ? <span className="fire-icon" title="Slow Request">🔥</span> 
+                    : log.highQueries 
+                      ? <span style={{color:"var(--accent-amber)"}} title="High DB Queries">⚠️</span> 
+                      : "-";
+
+                  return (
+                    <tr key={i} style={log.slow ? { background: "rgba(244,63,94,0.03)" } : {}}>
+                      <td style={{ color: "var(--text-300)", fontFamily: "var(--font-mono)" }}>{fTime(log.timestamp)}</td>
+                      <td><span className={`badge badge-${log.method}`}>{log.method}</span></td>
+                      <td className="route-path">{log.path}</td>
+                      <td className={`status-code ${getStatusClass(log.statusCode)}`} style={{ textAlign: "left" }}>{log.statusCode}</td>
+                      <td className={getTimeClass(log.responseTime)} style={{ fontWeight: 600 }}>{log.responseTime}ms</td>
+                      <td>
+                        {log.cached ? <span className="badge cache-hit">HIT</span> : <span className="badge cache-miss">MISS</span>}
+                      </td>
+                      <td>{flag}</td>
+                    </tr>
+                  )
+                })
+              )}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  );
+}

package/dashboard-ui/src/components/Login.tsx

@@ -0,0 +1,83 @@
+import React, { useState } from "react";
+import { Zap, Lock, User, Loader2 } from "lucide-react";
+
+interface LoginProps {
+  onLoginSuccess: () => void;
+}
+
+export function Login({ onLoginSuccess }: LoginProps) {
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    setError("");
+
+    try {
+      const resp = await fetch("./api/login", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ username, password }),
+      });
+
+      const data = await resp.json();
+
+      if (data.success) {
+        onLoginSuccess();
+      } else {
+        setError(data.message || "Invalid credentials");
+      }
+    } catch (err) {
+      setError("Failed to connect to server");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="login-wrapper animate-in">
+      <div className="login-card panel">
+        <div className="login-header">
+          <div className="brand-icon" style={{ margin: '0 auto 1.5rem', width: '48px', height: '48px' }}>
+            <Zap size={24} />
+          </div>
+          <h1>Dashboard Access</h1>
+          <p>Please enter your credentials to continue</p>
+        </div>
+
+        <form onSubmit={handleSubmit} className="login-form">
+          <div className="input-group">
+            <User size={18} className="input-icon" />
+            <input
+              type="text"
+              placeholder="Username"
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+              required
+            />
+          </div>
+
+          <div className="input-group">
+            <Lock size={18} className="input-icon" />
+            <input
+              type="password"
+              placeholder="Password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              required
+            />
+          </div>
+
+          {error && <div className="login-error">{error}</div>}
+
+          <button type="submit" className="login-button" disabled={loading}>
+            {loading ? <Loader2 className="animate-spin" size={20} /> : "Unlock Dashboard"}
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+}

package/dashboard-ui/src/components/RoutesTable.tsx

@@ -0,0 +1,110 @@
+import type { RouteStats } from "../hooks/useMetrics";
+import { fNum, getTimeClass, fBytes } from "../utils/formatters";
+
+export function RoutesTable({
+  routes,
+}: {
+  routes: Record<string, RouteStats>;
+}) {
+  const routeEntries = Object.entries(routes)
+    .sort(([, a], [, b]) => b.avgTime - a.avgTime)
+    .slice(0, 8); // top 8 slowest
+
+  return (
+    <div className="panel animate-in delay-2" style={{ maxHeight: "500px" }}>
+      <div className="panel-header">
+        <div className="panel-title">📉 Route Performance</div>
+      </div>
+      <div className="panel-body" style={{ padding: 0 }}>
+        <div className="table-container">
+          <table className="routes-table">
+            <thead>
+              <tr>
+                <th>Route Path</th>
+                <th>Calls</th>
+                <th>Avg Latency</th>
+                <th>Payload</th>
+                <th>Anomalies</th>
+              </tr>
+            </thead>
+            <tbody>
+              {routeEntries.length === 0 ? (
+                <tr>
+                  <td colSpan={5} className="empty-state">
+                    No route data collected yet.
+                  </td>
+                </tr>
+              ) : (
+                routeEntries.map(([route, stats]) => {
+                  const anomalies = [];
+                  if (stats.slowCount > 0)
+                    anomalies.push(
+                      <span key="slow">
+                        <span className="fire-icon">🔥</span>{" "}
+                        <span style={{ color: "var(--accent-rose)" }}>
+                          {stats.slowCount} Slow
+                        </span>
+                      </span>,
+                    );
+                  if (stats.highQueryCount > 0)
+                    anomalies.push(
+                      <span key="n1">
+                        <span style={{ color: "var(--accent-amber)" }}>⚠️</span>{" "}
+                        <span style={{ color: "var(--accent-amber)" }}>
+                          {stats.highQueryCount} N+1
+                        </span>
+                      </span>,
+                    );
+
+                  return (
+                    <tr key={route}>
+                      <td className="route-path">{route}</td>
+                      <td style={{ color: "var(--text-300)" }}>
+                        {fNum(stats.count)}
+                      </td>
+                      <td className={getTimeClass(stats.avgTime)}>
+                        {stats.avgTime}ms
+                      </td>
+                      <td style={{ color: "var(--text-300)" }}>
+                        {fBytes(stats.avgSize)}
+                      </td>
+                      <td>
+                        {anomalies.length > 0 ? (
+                          <div
+                            style={{
+                              display: "flex",
+                              gap: "8px",
+                              alignItems: "center",
+                            }}
+                          >
+                            {anomalies.map((a, i) => (
+                              <span key={i}>
+                                {i > 0 && (
+                                  <span
+                                    style={{
+                                      color: "var(--border)",
+                                      margin: "0 4px",
+                                    }}
+                                  >
+                                    |
+                                  </span>
+                                )}
+                                {a}
+                              </span>
+                            ))}
+                          </div>
+                        ) : (
+                          <span style={{ color: "var(--text-400)" }}>-</span>
+                        )}
+                      </td>
+                    </tr>
+                  );
+                })
+              )}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  );
+}

package/dashboard-ui/src/hooks/useMetrics.ts

@@ -0,0 +1,131 @@
+import { useState, useEffect } from "react";
+
+export interface RouteStats {
+  count: number;
+  totalTime: number;
+  slowCount: number;
+  highQueryCount: number;
+  rateLimitHits: number;
+  avgTime: number;
+  totalBytes: number;
+  avgSize: number;
+}
+
+export interface BlockedEvent {
+  ip: string;
+  path: string;
+  timestamp: number;
+  method: string;
+}
+
+export interface LogEntry {
+  method: string;
+  path: string;
+  statusCode: number;
+  responseTime: number;
+  timestamp: number;
+  slow: boolean;
+  cached: boolean;
+  queryCount?: number;
+  highQueries?: boolean;
+}
+
+export interface Insight {
+  type: "info" | "warning" | "error";
+  title: string;
+  message: string;
+  action?: string;
+}
+
+export interface HistoryData {
+  time: string;
+  lag: number;
+  memory: number;
+}
+
+export interface MetricsData {
+  uptime: number;
+  totalRequests: number;
+  avgResponseTime: number;
+  slowRequests: number;
+  highQueryRequests: number;
+  rateLimitHits: number;
+  cacheHits: number;
+  cacheMisses: number;
+  cacheHitRate: number;
+  cacheSize: number;
+  totalBytesSent: number;
+  avgResponseSize: number;
+  insights: Insight[];
+  eventLoopLag: number;
+  memoryUsage: {
+    rss: number;
+    heapTotal: number;
+    heapUsed: number;
+    external: number;
+  };
+  statusCodes: Record<number, number>;
+  routes: Record<string, RouteStats>;
+  recentLogs: LogEntry[];
+  blockedEvents: BlockedEvent[];
+}
+
+export function useMetrics(enabled: boolean = true) {
+  const [data, setData] = useState<MetricsData | null>(null);
+  const [history, setHistory] = useState<HistoryData[]>([]);
+  const [error, setError] = useState<Error | null>(null);
+
+  useEffect(() => {
+    if (!enabled) return;
+
+    let mounted = true;
+
+    const fetchMetrics = async () => {
+      try {
+        const response = await fetch("./api/metrics");
+        if (!response.ok) {
+          if (response.status === 401) {
+            throw new Error("unauthorized");
+          }
+          throw new Error("Failed to fetch metrics");
+        }
+        const metrics: MetricsData = await response.json();
+
+        if (mounted) {
+          setData(metrics);
+          setError(null);
+
+          // Append to history (keep last 50 data points)
+          setHistory((prev) => {
+            const timeStr = new Date().toLocaleTimeString([], {
+              hour12: false,
+              hour: "2-digit",
+              minute: "2-digit",
+              second: "2-digit",
+            });
+            const newPoint = {
+              time: timeStr,
+              lag: metrics.eventLoopLag,
+              memory: Math.round(metrics.memoryUsage.heapUsed / 1024 / 1024),
+            };
+            return [...prev, newPoint].slice(-30);
+          });
+        }
+      } catch (e: unknown) {
+        if (mounted) {
+          const errorObj = e instanceof Error ? e : new Error(String(e));
+          setError(errorObj);
+        }
+      }
+    };
+
+    fetchMetrics();
+    const id = setInterval(fetchMetrics, 3000);
+    return () => {
+      mounted = false;
+      clearInterval(id);
+    };
+  }, [enabled]);
+
+  return { data, history, error };
+}