express-performance-toolkit 1.0.0 → 2.0.0

package/dashboard-ui/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "dashboard-ui",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "lucide-react": "^0.577.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "recharts": "^3.8.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.4",
+    "@types/node": "^24.12.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "eslint": "^9.39.4",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.5.2",
+    "globals": "^17.4.0",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.57.0",
+    "vite": "^8.0.1"
+  }
+}

package/dashboard-ui/src/App.css

@@ -0,0 +1,184 @@
+.counter {
+  font-size: 16px;
+  padding: 5px 10px;
+  border-radius: 5px;
+  color: var(--accent);
+  background: var(--accent-bg);
+  border: 2px solid transparent;
+  transition: border-color 0.3s;
+  margin-bottom: 24px;
+
+  &:hover {
+    border-color: var(--accent-border);
+  }
+  &:focus-visible {
+    outline: 2px solid var(--accent);
+    outline-offset: 2px;
+  }
+}
+
+.hero {
+  position: relative;
+
+  .base,
+  .framework,
+  .vite {
+    inset-inline: 0;
+    margin: 0 auto;
+  }
+
+  .base {
+    width: 170px;
+    position: relative;
+    z-index: 0;
+  }
+
+  .framework,
+  .vite {
+    position: absolute;
+  }
+
+  .framework {
+    z-index: 1;
+    top: 34px;
+    height: 28px;
+    transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg)
+      scale(1.4);
+  }
+
+  .vite {
+    z-index: 0;
+    top: 107px;
+    height: 26px;
+    width: auto;
+    transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg)
+      scale(0.8);
+  }
+}
+
+#center {
+  display: flex;
+  flex-direction: column;
+  gap: 25px;
+  place-content: center;
+  place-items: center;
+  flex-grow: 1;
+
+  @media (max-width: 1024px) {
+    padding: 32px 20px 24px;
+    gap: 18px;
+  }
+}
+
+#next-steps {
+  display: flex;
+  border-top: 1px solid var(--border);
+  text-align: left;
+
+  & > div {
+    flex: 1 1 0;
+    padding: 32px;
+    @media (max-width: 1024px) {
+      padding: 24px 20px;
+    }
+  }
+
+  .icon {
+    margin-bottom: 16px;
+    width: 22px;
+    height: 22px;
+  }
+
+  @media (max-width: 1024px) {
+    flex-direction: column;
+    text-align: center;
+  }
+}
+
+#docs {
+  border-right: 1px solid var(--border);
+
+  @media (max-width: 1024px) {
+    border-right: none;
+    border-bottom: 1px solid var(--border);
+  }
+}
+
+#next-steps ul {
+  list-style: none;
+  padding: 0;
+  display: flex;
+  gap: 8px;
+  margin: 32px 0 0;
+
+  .logo {
+    height: 18px;
+  }
+
+  a {
+    color: var(--text-h);
+    font-size: 16px;
+    border-radius: 6px;
+    background: var(--social-bg);
+    display: flex;
+    padding: 6px 12px;
+    align-items: center;
+    gap: 8px;
+    text-decoration: none;
+    transition: box-shadow 0.3s;
+
+    &:hover {
+      box-shadow: var(--shadow);
+    }
+    .button-icon {
+      height: 18px;
+      width: 18px;
+    }
+  }
+
+  @media (max-width: 1024px) {
+    margin-top: 20px;
+    flex-wrap: wrap;
+    justify-content: center;
+
+    li {
+      flex: 1 1 calc(50% - 8px);
+    }
+
+    a {
+      width: 100%;
+      justify-content: center;
+      box-sizing: border-box;
+    }
+  }
+}
+
+#spacer {
+  height: 88px;
+  border-top: 1px solid var(--border);
+  @media (max-width: 1024px) {
+    height: 48px;
+  }
+}
+
+.ticks {
+  position: relative;
+  width: 100%;
+
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    top: -4.5px;
+    border: 5px solid transparent;
+  }
+
+  &::before {
+    left: 0;
+    border-left-color: var(--border);
+  }
+  &::after {
+    right: 0;
+    border-right-color: var(--border);
+  }
+}

package/dashboard-ui/src/App.tsx

@@ -0,0 +1,182 @@
+import { useState, useEffect } from "react";
+import {
+  AlertTriangle,
+  Zap,
+  LogOut,
+  LayoutDashboard,
+  Route,
+  Bell,
+  Terminal,
+} from "lucide-react";
+import { useMetrics } from "./hooks/useMetrics";
+import { formatUptime } from "./utils/formatters";
+import { Login } from "./components/Login";
+
+// Pages
+import { OverviewPage } from "./pages/OverviewPage";
+import { RoutesPage } from "./pages/RoutesPage";
+import { InsightsPage } from "./pages/InsightsPage";
+import { LogsPage } from "./pages/LogsPage";
+
+type PageType = "overview" | "routes" | "insights" | "logs";
+
+export default function App() {
+  const [activePage, setActivePage] = useState<PageType>("overview");
+  const [isAuthenticated, setIsAuthenticated] = useState<boolean | null>(null);
+  const [isAuthRequired, setIsAuthRequired] = useState(false);
+
+  const { data, history, error } = useMetrics(
+    isAuthenticated === true || (isAuthenticated !== null && !isAuthRequired),
+  );
+
+  const checkAuth = async () => {
+    try {
+      const resp = await fetch("./api/auth-check");
+      if (!resp.ok) throw new Error("Auth check failed");
+      const authData = await resp.json();
+      setIsAuthenticated(authData.authenticated);
+      setIsAuthRequired(authData.required);
+    } catch (err) {
+      console.error("Auth check failed", err);
+    }
+  };
+
+  const handleLogout = async () => {
+    try {
+      await fetch("./api/logout", { method: "POST" });
+      setIsAuthenticated(false);
+    } catch (err) {
+      console.error("Logout failed", err);
+    }
+  };
+
+  useEffect(() => {
+    checkAuth();
+  }, []);
+
+  useEffect(() => {
+    if (String(error) === "Unauthorized" && isAuthenticated !== false) {
+      checkAuth();
+    }
+  }, [error, isAuthenticated]);
+
+  if (isAuthRequired && isAuthenticated === false) {
+    return <Login onLoginSuccess={() => setIsAuthenticated(true)} />;
+  }
+
+  if (error && String(error) !== "Unauthorized") {
+    return (
+      <div className="dashboard-wrapper centered">
+        <div className="panel error-state">
+          <AlertTriangle size={48} color="var(--accent-rose)" />
+          <h2>Connection Lost</h2>
+          <p>
+            Unable to connect to the Performance API. Ensure your Express server
+            is running.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  if (!data || isAuthenticated === null)
+    return (
+      <div className="dashboard-wrapper empty-state">Connecting to API...</div>
+    );
+
+  const renderPage = () => {
+    switch (activePage) {
+      case "overview":
+        return <OverviewPage data={data} history={history} />;
+      case "routes":
+        return <RoutesPage data={data} />;
+      case "insights":
+        return <InsightsPage data={data} />;
+      case "logs":
+        return <LogsPage data={data} />;
+      default:
+        return <OverviewPage data={data} history={history} />;
+    }
+  };
+
+  return (
+    <>
+      <nav className="navbar animate-in">
+        <div
+          className="brand"
+          onClick={() => setActivePage("overview")}
+          style={{ cursor: "pointer" }}
+        >
+          <div className="brand-icon">
+            <Zap size={18} />
+          </div>
+          <div className="brand-title">
+            Express <span>Performance</span> Toolkit
+          </div>
+        </div>
+
+        <div className="nav-links">
+          <button
+            className={`nav-link ${activePage === "overview" ? "active" : ""}`}
+            onClick={() => setActivePage("overview")}
+          >
+            <LayoutDashboard size={16} /> Overview
+          </button>
+          <button
+            className={`nav-link ${activePage === "routes" ? "active" : ""}`}
+            onClick={() => setActivePage("routes")}
+          >
+            <Route size={16} /> Routes
+          </button>
+          <button
+            className={`nav-link ${activePage === "insights" ? "active" : ""}`}
+            onClick={() => setActivePage("insights")}
+          >
+            <Bell size={16} /> Insights
+            {data.insights.length > 0 && (
+              <span className="badge">{data.insights.length}</span>
+            )}
+          </button>
+          <button
+            className={`nav-link ${activePage === "logs" ? "active" : ""}`}
+            onClick={() => setActivePage("logs")}
+          >
+            <Terminal size={16} /> Logs
+          </button>
+        </div>
+
+        <div className="nav-actions">
+          <div className="live-indicator hide-mobile">
+            <div className="pulse-dot"></div> Live
+            <span className="uptime-mono">{formatUptime(data.uptime)}</span>
+          </div>
+          <div className="live-indicator">
+            <span>Lag</span>
+            <span
+              className="lag-mono"
+              style={{
+                color:
+                  data.eventLoopLag > 100
+                    ? "var(--accent-rose)"
+                    : "var(--accent-emerald)",
+              }}
+            >
+              {data.eventLoopLag}ms
+            </span>
+          </div>
+          {isAuthRequired && (
+            <button
+              className="nav-btn logout-btn"
+              onClick={handleLogout}
+              title="Logout"
+            >
+              <LogOut size={16} />
+            </button>
+          )}
+        </div>
+      </nav>
+
+      <div className="dashboard-wrapper">{renderPage()}</div>
+    </>
+  );
+}

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

@@ -0,0 +1,108 @@
+import { X, ShieldAlert, Clock, Globe } from "lucide-react";
+import type { BlockedEvent } from "../hooks/useMetrics";
+
+interface BlockedModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  events: BlockedEvent[];
+}
+
+export function BlockedModal({ isOpen, onClose, events }: BlockedModalProps) {
+  if (!isOpen) return null;
+
+  return (
+    <div className="modal-overlay" onClick={onClose}>
+      <div
+        className="modal-content animate-in"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="modal-header">
+          <div className="modal-title">
+            <ShieldAlert
+              size={20}
+              className="val-rose"
+              style={{ marginRight: 10 }}
+            />
+            Blocked IP Monitor
+          </div>
+          <button className="modal-close" onClick={onClose}>
+            <X size={20} />
+          </button>
+        </div>
+
+        <div className="modal-body">
+          {events.length === 0 ? (
+            <div className="empty-state">
+              <p>No blocked traffic detected yet.</p>
+            </div>
+          ) : (
+            <div className="blocked-list">
+              <table className="routes-table">
+                <thead>
+                  <tr>
+                    <th>Timestamp</th>
+                    <th>IP Address</th>
+                    <th>Method</th>
+                    <th>Path</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {[...events].reverse().map((event, i) => (
+                    <tr key={i}>
+                      <td>
+                        <div
+                          style={{
+                            display: "flex",
+                            alignItems: "center",
+                            gap: 6,
+                            fontSize: "0.8rem",
+                            color: "var(--text-400)",
+                          }}
+                        >
+                          <Clock size={12} />
+                          {new Date(event.timestamp).toLocaleTimeString()}
+                        </div>
+                      </td>
+                      <td>
+                        <div
+                          style={{
+                            display: "flex",
+                            alignItems: "center",
+                            gap: 6,
+                            fontWeight: 600,
+                          }}
+                        >
+                          <Globe size={12} className="val-rose" />
+                          {event.ip}
+                        </div>
+                      </td>
+                      <td>
+                        <span
+                          className={`method-badge ${event.method.toLowerCase()}`}
+                        >
+                          {event.method}
+                        </span>
+                      </td>
+                      <td
+                        style={{ fontFamily: "monospace", fontSize: "0.9rem" }}
+                      >
+                        {event.path}
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          )}
+        </div>
+
+        <div className="modal-footer">
+          <p style={{ fontSize: "0.8rem", color: "var(--text-400)" }}>
+            Showing last {events.length} security events. Use this data to
+            identify brute-force patterns.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,45 @@
+import type { MetricsData } from '../hooks/useMetrics';
+import { fNum } from '../utils/formatters';
+
+export function CachePanel({ data }: { data: MetricsData }) {
+  const hitPct = data.cacheHitRate;
+  return (
+    <div className="panel animate-in delay-4" style={{ flex: 1 }}>
+      <div className="panel-header">
+        <div className="panel-title">📦 Cache Engine</div>
+      </div>
+      <div className="panel-body">
+        <div className="cache-viz">
+          <div className="donut-wrap">
+            <svg viewBox="0 0 42 42" width="140" height="140" style={{ transform: "rotate(-90deg)" }}>
+              <circle cx="21" cy="21" r="15.915" fill="none" stroke="var(--bg-hover)" strokeWidth="6" />
+              <circle cx="21" cy="21" r="15.915" fill="none" stroke="url(#gradHit)" strokeWidth="6" strokeDasharray={`${hitPct} ${100 - hitPct}`} strokeLinecap="round" style={{ transition: "stroke-dasharray 1s cubic-bezier(0.4, 0, 0.2, 1)" }} />
+              <defs>
+                <linearGradient id="gradHit" x1="0" y1="0" x2="0" y2="1">
+                  <stop offset="0%" stopColor="var(--accent-cyan)" />
+                  <stop offset="100%" stopColor="var(--accent-emerald)" />
+                </linearGradient>
+              </defs>
+            </svg>
+            <div className="donut-center" style={{ transform: "scale(0.9)" }}>
+              <div className="donut-val">{hitPct}%</div>
+              <div className="donut-lbl">Hits</div>
+            </div>
+          </div>
+          <div className="legend">
+            <div className="legend-item">
+              <div className="legend-dot" style={{ background: "var(--grad-success)" }}></div>
+              <span>Hits</span>
+              <span className="legend-val">{fNum(data.cacheHits)}</span>
+            </div>
+            <div className="legend-item">
+              <div className="legend-dot" style={{ background: "var(--bg-hover)", border: "1px solid var(--text-400)" }}></div>
+              <span>Misses</span>
+              <span className="legend-val">{fNum(data.cacheMisses)}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,142 @@
+import { Activity } from "lucide-react";
+import { AreaChart, Area, Tooltip, ResponsiveContainer } from "recharts";
+
+export type ChartDataPoint = {
+  time: string;
+  lag: number;
+  memory: number;
+};
+
+export function HealthCharts({ history }: { history: ChartDataPoint[] }) {
+  return (
+    <div
+      className="panel animate-in delay-3"
+      style={{ flex: 1, minHeight: "260px" }}
+    >
+      <div className="panel-header">
+        <div className="panel-title">
+          <Activity size={18} /> Server Health (Live)
+        </div>
+      </div>
+      <div
+        className="panel-body"
+        style={{
+          padding: "1rem",
+          display: "flex",
+          flexDirection: "column",
+          gap: "1rem",
+        }}
+      >
+        <div style={{ height: "90px", width: "100%" }}>
+          <div
+            style={{
+              fontSize: "0.75rem",
+              color: "var(--text-400)",
+              marginBottom: "4px",
+              display: "flex",
+              justifyContent: "space-between",
+            }}
+          >
+            <span>Event Loop Lag (ms)</span>
+            <span style={{ color: "var(--accent-cyan)" }}>
+              Latest: {history[history.length - 1]?.lag || 0}ms
+            </span>
+          </div>
+          <ResponsiveContainer width="100%" height="100%">
+            <AreaChart
+              data={history}
+              margin={{ top: 0, right: 0, left: 0, bottom: 0 }}
+            >
+              <defs>
+                <linearGradient id="lagColor" x1="0" y1="0" x2="0" y2="1">
+                  <stop
+                    offset="5%"
+                    stopColor="var(--accent-cyan)"
+                    stopOpacity={0.3}
+                  />
+                  <stop
+                    offset="95%"
+                    stopColor="var(--accent-cyan)"
+                    stopOpacity={0}
+                  />
+                </linearGradient>
+              </defs>
+              <Tooltip
+                contentStyle={{
+                  background: "var(--bg-surface-glass)",
+                  border: "1px solid var(--border)",
+                  borderRadius: "8px",
+                  fontSize: "0.8rem",
+                }}
+                itemStyle={{ color: "var(--text-100)" }}
+              />
+              <Area
+                type="monotone"
+                dataKey="lag"
+                stroke="var(--accent-cyan)"
+                fillOpacity={1}
+                fill="url(#lagColor)"
+                isAnimationActive={false}
+              />
+            </AreaChart>
+          </ResponsiveContainer>
+        </div>
+
+        <div style={{ height: "90px", width: "100%" }}>
+          <div
+            style={{
+              fontSize: "0.75rem",
+              color: "var(--text-400)",
+              marginBottom: "4px",
+              display: "flex",
+              justifyContent: "space-between",
+            }}
+          >
+            <span>Heap Memory Used (MB)</span>
+            <span style={{ color: "var(--accent-indigo)" }}>
+              Latest: {history[history.length - 1]?.memory || 0}MB
+            </span>
+          </div>
+          <ResponsiveContainer width="100%" height="100%">
+            <AreaChart
+              data={history}
+              margin={{ top: 0, right: 0, left: 0, bottom: 0 }}
+            >
+              <defs>
+                <linearGradient id="memColor" x1="0" y1="0" x2="0" y2="1">
+                  <stop
+                    offset="5%"
+                    stopColor="var(--accent-indigo)"
+                    stopOpacity={0.3}
+                  />
+                  <stop
+                    offset="95%"
+                    stopColor="var(--accent-indigo)"
+                    stopOpacity={0}
+                  />
+                </linearGradient>
+              </defs>
+              <Tooltip
+                contentStyle={{
+                  background: "var(--bg-surface-glass)",
+                  border: "1px solid var(--border)",
+                  borderRadius: "8px",
+                  fontSize: "0.8rem",
+                }}
+                itemStyle={{ color: "var(--text-100)" }}
+              />
+              <Area
+                type="monotone"
+                dataKey="memory"
+                stroke="var(--accent-indigo)"
+                fillOpacity={1}
+                fill="url(#memColor)"
+                isAnimationActive={false}
+              />
+            </AreaChart>
+          </ResponsiveContainer>
+        </div>
+      </div>
+    </div>
+  );
+}