adonisjs-server-stats 1.13.0 → 1.14.0

package/dist/react/index-DOSlCpZ9.js

@@ -0,0 +1,1159 @@
+import { jsx as s, jsxs as c, Fragment as P } from "react/jsx-runtime";
+import V, { useState as w, useRef as O, useEffect as B, useCallback as x, useMemo as D, Suspense as z, lazy as T } from "react";
+import { DEFAULT_FEATURES as G, detectFeatures as Q, ServerStatsController as X, getTheme as Y, onThemeChange as Z, toggleTheme as ee, buildSparklineData as se, computeStats as te, formatStatNum as U, detectMetricGroupsFromStats as ne, getVisibleMetricGroups as re, METRIC_DEFINITIONS as oe, TAB_ICONS as C, DashboardDataController as ae, subscribeToChannel as ie, DebugDataController as le, compactPreview as ce } from "adonisjs-server-stats/core";
+import { createPortal as de } from "react-dom";
+function q(e = {}) {
+  const { baseUrl: r = "", debugEndpoint: t = "/admin/api/debug", authToken: n } = e, [o, l] = w(G), [b, a] = w(!0), [v, m] = w(null), u = O(!1);
+  return B(() => {
+    if (u.current) return;
+    u.current = !0;
+    let d = !1;
+    return (async () => {
+      try {
+        const g = await Q({ baseUrl: r, debugEndpoint: t, authToken: n });
+        d || (l(g), a(!1));
+      } catch (g) {
+        d || (m(g instanceof Error ? g : new Error(String(g))), a(!1));
+      }
+    })(), () => {
+      d = !0, u.current = !1;
+    };
+  }, [r, t, n]), { features: o, isLoading: b, error: v };
+}
+function ue(e = {}) {
+  const {
+    baseUrl: r = "",
+    endpoint: t = "/admin/api/server-stats",
+    channelName: n = "admin/server-stats",
+    authToken: o,
+    pollInterval: l = 3e3
+  } = e, [b, a] = w(null), [v, m] = w(!1), [u, d] = w(!1), [f, g] = w(null), [p, S] = w(!1), R = O(null);
+  B(() => {
+    S(!1);
+  }, [r, o]), B(() => {
+    if (p) return;
+    const k = new X({
+      baseUrl: r,
+      endpoint: t,
+      channelName: n,
+      authToken: o,
+      pollInterval: l,
+      onStatsUpdate: (y) => a(y),
+      onConnectionChange: (y) => m(y),
+      onStaleChange: (y) => d(y),
+      onError: (y) => g(y),
+      onUnauthorizedChange: (y) => S(y)
+    });
+    return R.current = k, k.start(), () => {
+      k.stop(), R.current = null;
+    };
+  }, [r, n, o, l, p]);
+  const I = x((k) => R.current?.getHistory(k) ?? [], []);
+  return {
+    stats: b,
+    history: R.current?.getAllHistory() ?? {},
+    getHistory: I,
+    isConnected: v,
+    isStale: u,
+    error: f,
+    unauthorized: p
+  };
+}
+function F() {
+  const [e, r] = w(() => Y());
+  B(() => Z((o) => {
+    r(o);
+  }), []);
+  const t = x(() => {
+    const n = ee();
+    return r(n), n;
+  }, []);
+  return { theme: e, toggleTheme: t };
+}
+function he({
+  data: e,
+  color: r = "#34d399",
+  width: t = 120,
+  height: n = 32,
+  className: o = ""
+}) {
+  const l = D(
+    () => se(e, { width: t, height: n }),
+    [e, t, n]
+  ), b = D(() => "ss-grad-" + Math.random().toString(36).slice(2, 8), []), a = { "--ss-accent": r };
+  if (!l)
+    return /* @__PURE__ */ s("div", { className: `ss-dash-sparkline ${o}`, style: a, children: /* @__PURE__ */ s(
+      "svg",
+      {
+        width: t,
+        height: n,
+        viewBox: `0 0 ${t} ${n}`,
+        style: { display: "block" },
+        children: /* @__PURE__ */ c("text", { x: t / 2, y: n / 2 + 3, textAnchor: "middle", fill: "#737373", fontSize: "9", children: [
+          "collecting",
+          "…"
+        ] })
+      }
+    ) });
+  const v = r || "var(--ss-accent)";
+  return /* @__PURE__ */ s("div", { className: `ss-dash-sparkline ${o}`, style: a, children: /* @__PURE__ */ c(
+    "svg",
+    {
+      width: t,
+      height: n,
+      viewBox: `0 0 ${t} ${n}`,
+      style: { display: "block" },
+      children: [
+        /* @__PURE__ */ s("defs", { children: /* @__PURE__ */ c("linearGradient", { id: b, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+          /* @__PURE__ */ s("stop", { offset: "0%", stopColor: v, stopOpacity: "0.25" }),
+          /* @__PURE__ */ s("stop", { offset: "100%", stopColor: v, stopOpacity: "0.02" })
+        ] }) }),
+        /* @__PURE__ */ s("path", { d: l.areaPath, fill: `url(#${b})` }),
+        /* @__PURE__ */ s(
+          "path",
+          {
+            className: "ss-dash-sparkline-line",
+            d: "M" + l.points.replace(/ /g, " L"),
+            fill: "none",
+            stroke: v,
+            strokeWidth: "1.5",
+            strokeLinejoin: "round",
+            strokeLinecap: "round"
+          }
+        )
+      ]
+    }
+  ) });
+}
+const pe = {
+  "ss-red": "#f87171",
+  "ss-amber": "#fbbf24",
+  "ss-green": "#34d399",
+  "ss-muted": "#737373"
+};
+function be(e, r, t) {
+  const [n, o] = w({
+    position: "absolute",
+    bottom: "100%",
+    left: 0,
+    marginBottom: "10px",
+    zIndex: 180
+  });
+  return B(() => {
+    if (!t) return;
+    const l = () => {
+      const a = e.current, v = r.current;
+      if (!a || !v) return;
+      const m = a.closest(".ss-bar");
+      if (!m) return;
+      const u = a.getBoundingClientRect(), d = m.getBoundingClientRect(), f = u.left - d.left + u.width / 2;
+      o({
+        position: "absolute",
+        bottom: "100%",
+        left: `${f}px`,
+        transform: "translateX(-50%)",
+        marginBottom: "10px",
+        zIndex: 180
+      }), requestAnimationFrame(() => {
+        const g = v.getBoundingClientRect();
+        let p = 0;
+        g.left < 8 ? p = 8 - g.left : g.right > window.innerWidth - 8 && (p = window.innerWidth - 8 - g.right), p && o((S) => ({
+          ...S,
+          transform: `translateX(calc(-50% + ${p}px))`
+        }));
+      });
+    };
+    l();
+    const b = e.current?.closest(".ss-bar-scroll");
+    return b?.addEventListener("scroll", l), window.addEventListener("resize", l), () => {
+      b?.removeEventListener("scroll", l), window.removeEventListener("resize", l);
+    };
+  }, [t, e, r]), n;
+}
+function ge({ metric: e, stats: r, history: t, className: n = "" }) {
+  const [o, l] = w(!1), [b, a] = w(!1), v = O(null), m = O(null);
+  if (e.show && !e.show(r))
+    return null;
+  const u = e.value ? e.value(r) : e.format(r), d = e.color ? e.color(r) : "", f = d && pe[d] || "#34d399", g = typeof e.detail == "function" ? e.detail(r) : e.detail, p = D(() => te(t), [t]), S = o || b, R = be(v, m, S), I = x(($) => {
+    $.stopPropagation(), l((_) => !_);
+  }, []);
+  B(() => {
+    if (!o) return;
+    const $ = (N) => {
+      const i = N.target;
+      v.current && !v.current.contains(i) && m.current && !m.current.contains(i) && l(!1);
+    }, _ = (N) => {
+      N.key === "Escape" && l(!1);
+    };
+    return document.addEventListener("click", $), document.addEventListener("keydown", _), () => {
+      document.removeEventListener("click", $), document.removeEventListener("keydown", _);
+    };
+  }, [o]);
+  const k = v.current?.closest(".ss-bar"), y = S && k ? de(
+    /* @__PURE__ */ c(
+      "div",
+      {
+        ref: m,
+        className: `ss-tooltip ${o ? "ss-pinned" : ""}`,
+        style: R,
+        children: [
+          /* @__PURE__ */ c("div", { className: "ss-tooltip-inner", style: { position: "relative" }, children: [
+            o && /* @__PURE__ */ s(
+              "button",
+              {
+                className: "ss-tooltip-close",
+                onClick: ($) => {
+                  $.stopPropagation(), l(!1);
+                },
+                type: "button",
+                children: "×"
+              }
+            ),
+            /* @__PURE__ */ c("div", { className: "ss-tooltip-header", children: [
+              /* @__PURE__ */ s("span", { className: "ss-tooltip-title", children: e.title }),
+              e.unit && /* @__PURE__ */ s("span", { className: "ss-tooltip-unit", children: e.unit })
+            ] }),
+            /* @__PURE__ */ c("div", { className: "ss-tooltip-current", children: [
+              /* @__PURE__ */ s("span", { className: "ss-tooltip-current-label", children: "Current: " }),
+              /* @__PURE__ */ s("span", { className: "ss-tooltip-current-value", children: u })
+            ] }),
+            p && /* @__PURE__ */ c("div", { className: "ss-tooltip-stats", children: [
+              /* @__PURE__ */ c("span", { children: [
+                "Min: ",
+                U(p.min, e.unit)
+              ] }),
+              /* @__PURE__ */ c("span", { children: [
+                "Max: ",
+                U(p.max, e.unit)
+              ] }),
+              /* @__PURE__ */ c("span", { children: [
+                "Avg: ",
+                U(p.avg, e.unit)
+              ] })
+            ] }),
+            g && /* @__PURE__ */ s("div", { className: "ss-tooltip-details", children: g }),
+            t.length > 0 && /* @__PURE__ */ c(P, { children: [
+              /* @__PURE__ */ s("div", { className: "ss-tooltip-sparkline", children: /* @__PURE__ */ s(he, { data: t, color: f }) }),
+              /* @__PURE__ */ c("div", { className: "ss-tooltip-samples", children: [
+                "Last ",
+                Math.min(t.length, 60),
+                " samples (~",
+                Math.round(Math.min(t.length, 60) * 3 / 60),
+                " min)"
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ s("div", { className: "ss-tooltip-arrow" })
+        ]
+      }
+    ),
+    k
+  ) : null;
+  return /* @__PURE__ */ c(P, { children: [
+    /* @__PURE__ */ c(
+      "div",
+      {
+        ref: v,
+        className: `ss-badge ${o ? "ss-pinned" : ""} ${n}`,
+        onClick: I,
+        onMouseEnter: () => !o && a(!0),
+        onMouseLeave: () => a(!1),
+        role: "button",
+        tabIndex: 0,
+        onKeyDown: ($) => $.key === "Enter" && I($),
+        children: [
+          /* @__PURE__ */ s("span", { className: "ss-label", children: e.label }),
+          /* @__PURE__ */ s("span", { className: `ss-value ${d}`, children: u })
+        ]
+      }
+    ),
+    y
+  ] });
+}
+function Qe(e) {
+  const {
+    featureOptions: r,
+    autoHideOnUnauthorized: t = !0,
+    onOpenDebugPanel: n,
+    debugPanelOpen: o = !1,
+    onConnectionChange: l,
+    ...b
+  } = e, { stats: a, getHistory: v, isConnected: m, isStale: u, unauthorized: d } = ue(b);
+  B(() => {
+    l?.(m);
+  }, [m, l]);
+  const { features: f } = q(r), { theme: g } = F(), [p, S] = w(() => typeof window > "u" ? !0 : localStorage.getItem("admin:stats-bar") !== "hidden"), R = O(null), I = O(null);
+  B(() => {
+    t && d && S(!1);
+  }, [t, d]);
+  const k = x(() => {
+    S((N) => {
+      const i = !N;
+      return localStorage.setItem("admin:stats-bar", i ? "visible" : "hidden"), i;
+    });
+  }, []);
+  B(() => {
+    const N = I.current;
+    if (!N) return;
+    const i = (L) => {
+      Math.abs(L.deltaX) > Math.abs(L.deltaY) || (L.preventDefault(), N.scrollLeft += L.deltaY);
+    };
+    return N.addEventListener("wheel", i, { passive: !1 }), () => N.removeEventListener("wheel", i);
+  }, []);
+  const y = D(() => a ? ne(a) : re(f), [a, f]), $ = D(
+    () => oe.filter((N) => y.has(N.group || "core")),
+    [y]
+  ), _ = D(() => {
+    const N = [];
+    let i = "";
+    for (const L of $) {
+      const M = L.group || "core";
+      M !== i && (i = M, N.push({ group: i, metrics: [] })), N[N.length - 1].metrics.push(L);
+    }
+    return N;
+  }, [$]);
+  return t && d ? null : /* @__PURE__ */ c(P, { children: [
+    /* @__PURE__ */ c(
+      "button",
+      {
+        type: "button",
+        className: `ss-toggle ${p ? "ss-visible" : "ss-collapsed"}`,
+        onClick: k,
+        title: p ? "Hide stats bar" : "Show stats bar",
+        "data-ss-theme": g,
+        children: [
+          !p && a && /* @__PURE__ */ c("span", { className: "ss-toggle-summary", style: { display: "flex" }, children: [
+            y.has("process") && /* @__PURE__ */ c(P, { children: [
+              /* @__PURE__ */ c(
+                "span",
+                {
+                  className: `ss-value ${a.cpuPercent > 80 ? "ss-red" : a.cpuPercent > 50 ? "ss-amber" : "ss-green"}`,
+                  children: [
+                    a.cpuPercent.toFixed(0),
+                    "%"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ s("span", { className: "ss-value ss-green", children: a.memHeapUsed !== void 0 ? Math.round(a.memHeapUsed / (1024 * 1024)) + "M" : "-" })
+            ] }),
+            y.has("redis") && a.redisOk !== void 0 && /* @__PURE__ */ s("span", { className: `ss-value ${a.redisOk ? "ss-green" : "ss-red"}`, children: a.redisOk ? "✓" : "✗" })
+          ] }),
+          p && /* @__PURE__ */ s("span", { className: "ss-toggle-label", style: { color: "#737373" }, children: "hide stats" }),
+          /* @__PURE__ */ s("span", { className: "ss-toggle-arrow", children: p ? "▼" : "▲" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ c("div", { ref: R, className: p ? "ss-bar" : "ss-bar ss-hidden", "data-ss-theme": g, children: [
+      /* @__PURE__ */ c("div", { className: "ss-bar-left", children: [
+        n && /* @__PURE__ */ s(
+          "button",
+          {
+            type: "button",
+            className: `ss-dbg-btn ${o ? "ss-dbg-active" : ""}`,
+            onClick: n,
+            title: "Toggle debug panel",
+            id: "ss-dbg-wrench",
+            children: /* @__PURE__ */ s(
+              "svg",
+              {
+                width: "14",
+                height: "14",
+                viewBox: C.wrench.viewBox,
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                dangerouslySetInnerHTML: { __html: C.wrench.elements.join("") }
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ s("div", { className: u ? "ss-dot ss-stale" : "ss-dot" })
+      ] }),
+      /* @__PURE__ */ s("div", { ref: I, className: "ss-bar-scroll", id: "ss-bar-scroll", children: a && _.map((N, i) => /* @__PURE__ */ c(V.Fragment, { children: [
+        i > 0 && /* @__PURE__ */ s("div", { className: "ss-group-sep" }),
+        /* @__PURE__ */ s("div", { className: "ss-group", children: N.metrics.map((L) => /* @__PURE__ */ s(
+          ge,
+          {
+            metric: L,
+            stats: a,
+            history: v(L.historyKey || "")
+          },
+          L.id
+        )) })
+      ] }, N.group)) })
+    ] })
+  ] });
+}
+function A({
+  theme: e,
+  onToggle: r,
+  className: t = "",
+  classPrefix: n = "ss-dash"
+}) {
+  const o = e === "dark";
+  return /* @__PURE__ */ s(
+    "button",
+    {
+      type: "button",
+      className: `${n === "ss-dbg" ? "ss-dbg-theme-toggle" : "ss-dash-theme-btn"} ${t}`,
+      onClick: r,
+      title: o ? "Switch to light theme" : "Switch to dark theme",
+      "aria-label": o ? "Switch to light theme" : "Switch to dark theme",
+      children: o ? (
+        // Sun icon
+        /* @__PURE__ */ s(
+          "svg",
+          {
+            width: "16",
+            height: "16",
+            viewBox: C.sun.viewBox,
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            dangerouslySetInnerHTML: { __html: C.sun.elements.join("") }
+          }
+        )
+      ) : (
+        // Moon icon
+        /* @__PURE__ */ s(
+          "svg",
+          {
+            width: "16",
+            height: "16",
+            viewBox: C.moon.viewBox,
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            dangerouslySetInnerHTML: { __html: C.moon.elements.join("") }
+          }
+        )
+      )
+    }
+  );
+}
+const me = T(() => import("./QueriesTab-CY9CG_7L.js")), ve = T(() => import("./EventsTab-BNVEySAm.js")), fe = T(() => import("./EmailsTab-DKDrRmRH.js")), we = T(() => import("./RoutesTab-Cnqy8UcK.js")), ke = T(() => import("./LogsTab-CJM47LPn.js")), ye = T(() => import("./TimelineTab-1YOERxe5.js")), Ne = T(() => import("./CacheTab-DWeXnEBI.js")), Ce = T(() => import("./JobsTab-DXQzXrDt.js")), Se = T(() => import("./ConfigTab-D4640WJZ.js")), Le = T(() => import("./InternalsTab-BygoSorC.js")), Te = T(() => import("./CustomPaneTab-DglmAVMC.js"));
+function Xe(e) {
+  const {
+    defaultOpen: r = !1,
+    dashboardPath: t,
+    isOpen: n,
+    onOpenChange: o,
+    isLive: l = !1,
+    ...b
+  } = e, [a, v] = w(r), m = n !== void 0 ? n : a, u = (i) => {
+    o ? o(i) : v(i);
+  }, [d, f] = w("queries"), g = D(
+    () => b,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [b.baseUrl, b.debugEndpoint, b.authToken]
+  ), { features: p } = q(g), { theme: S, toggleTheme: R } = F(), I = p.customPanes || [];
+  B(() => {
+    const i = (L) => {
+      L.key === "Escape" && m && u(!1);
+    };
+    return document.addEventListener("keydown", i), () => document.removeEventListener("keydown", i);
+  }, [m]);
+  const k = D(
+    () => [
+      { id: "queries", label: "Queries", visible: !0 },
+      { id: "events", label: "Events", visible: !0 },
+      { id: "emails", label: "Emails", visible: !0 },
+      { id: "routes", label: "Routes", visible: !0 },
+      { id: "logs", label: "Logs", visible: !0 },
+      { id: "timeline", label: "Requests", visible: p.tracing },
+      { id: "cache", label: "Cache", visible: p.cache },
+      { id: "jobs", label: "Jobs", visible: p.queues },
+      { id: "config", label: "Config", visible: !0 },
+      { id: "internals", label: "Internals", visible: !0 }
+    ],
+    [p]
+  ), y = D(() => k.filter((i) => i.visible), [k]);
+  B(() => {
+    const i = [
+      ...y.map((L) => L.id),
+      ...I.map((L) => L.id)
+    ];
+    !i.includes(d) && i.length > 0 && f(i[0]);
+  }, [y, I, d]);
+  const $ = x(() => {
+    u(!m);
+  }, [m]), _ = D(() => {
+    const i = { options: g }, L = I.find((M) => M.id === d);
+    if (L)
+      return /* @__PURE__ */ s(Te, { pane: L, options: g });
+    switch (d) {
+      case "queries":
+        return /* @__PURE__ */ s(me, { ...i });
+      case "events":
+        return /* @__PURE__ */ s(ve, { ...i });
+      case "emails":
+        return /* @__PURE__ */ s(fe, { ...i });
+      case "routes":
+        return /* @__PURE__ */ s(
+          we,
+          {
+            ...i,
+            currentPath: typeof window < "u" ? window.location.pathname : ""
+          }
+        );
+      case "logs":
+        return /* @__PURE__ */ s(ke, { ...i });
+      case "timeline":
+        return /* @__PURE__ */ s(ye, { ...i });
+      case "cache":
+        return /* @__PURE__ */ s(Ne, { ...i, dashboardPath: t });
+      case "jobs":
+        return /* @__PURE__ */ s(Ce, { ...i, dashboardPath: t });
+      case "config":
+        return /* @__PURE__ */ s(Se, { ...i, dashboardPath: t });
+      case "internals":
+        return /* @__PURE__ */ s(Le, { ...i });
+      default:
+        return /* @__PURE__ */ s("div", { className: "ss-dbg-empty", children: "Unknown tab" });
+    }
+  }, [d, g, I, t]), N = x(
+    () => /* @__PURE__ */ s(z, { fallback: /* @__PURE__ */ s("div", { className: "ss-dbg-empty", children: "Loading..." }), children: _ }),
+    [_]
+  );
+  return /* @__PURE__ */ c(P, { children: [
+    n === void 0 && /* @__PURE__ */ s(
+      "button",
+      {
+        type: "button",
+        className: `ss-dbg-btn ${m ? "ss-dbg-active" : ""}`,
+        onClick: $,
+        title: "Toggle debug panel",
+        id: "ss-dbg-wrench",
+        children: /* @__PURE__ */ s(
+          "svg",
+          {
+            width: "14",
+            height: "14",
+            viewBox: C.wrench.viewBox,
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            dangerouslySetInnerHTML: { __html: C.wrench.elements.join("") }
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ c(
+      "div",
+      {
+        className: `ss-dbg-panel ${m ? "ss-dbg-open" : ""}`,
+        "data-ss-theme": S,
+        id: "ss-dbg-panel",
+        children: [
+          /* @__PURE__ */ c("div", { className: "ss-dbg-tabs", children: [
+            /* @__PURE__ */ c("div", { className: "ss-dbg-tabs-scroll", role: "tablist", children: [
+              y.map((i) => /* @__PURE__ */ c(
+                "button",
+                {
+                  type: "button",
+                  role: "tab",
+                  "aria-selected": d === i.id,
+                  className: `ss-dbg-tab ${d === i.id ? "ss-dbg-active" : ""}`,
+                  onClick: () => f(i.id),
+                  children: [
+                    C[i.id] ? /* @__PURE__ */ s(
+                      "svg",
+                      {
+                        className: "ss-dbg-tab-icon",
+                        viewBox: C[i.id].viewBox,
+                        dangerouslySetInnerHTML: { __html: C[i.id].elements.join("") }
+                      }
+                    ) : null,
+                    i.label
+                  ]
+                },
+                i.id
+              )),
+              I.map((i) => /* @__PURE__ */ s(
+                "button",
+                {
+                  type: "button",
+                  role: "tab",
+                  "aria-selected": d === i.id,
+                  className: `ss-dbg-tab ${d === i.id ? "ss-dbg-active" : ""}`,
+                  onClick: () => f(i.id),
+                  children: i.label
+                },
+                i.id
+              ))
+            ] }),
+            /* @__PURE__ */ c("div", { className: "ss-dbg-tabs-right", children: [
+              /* @__PURE__ */ s(
+                "span",
+                {
+                  className: `ss-dbg-conn-mode ${l ? "ss-dbg-conn-live" : "ss-dbg-conn-polling"}`,
+                  title: l ? "Connected via Transmit (SSE) — real-time updates" : "Polling every 3s",
+                  children: l ? "live" : "polling"
+                }
+              ),
+              /* @__PURE__ */ s(A, { theme: S, onToggle: R, classPrefix: "ss-dbg" }),
+              t && /* @__PURE__ */ s(
+                "a",
+                {
+                  href: t,
+                  target: "_blank",
+                  rel: "noopener noreferrer",
+                  className: "ss-dbg-dashboard-link",
+                  title: "Open dashboard",
+                  children: /* @__PURE__ */ s(
+                    "svg",
+                    {
+                      width: "14",
+                      height: "14",
+                      viewBox: C["external-link"].viewBox,
+                      fill: "none",
+                      stroke: "currentColor",
+                      strokeWidth: "2",
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      dangerouslySetInnerHTML: { __html: C["external-link"].elements.join("") }
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ s(
+                "button",
+                {
+                  type: "button",
+                  className: "ss-dbg-close",
+                  onClick: () => u(!1),
+                  title: "Close panel",
+                  children: "×"
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ s("div", { className: "ss-dbg-content", children: m && N() })
+        ]
+      }
+    )
+  ] });
+}
+function Ee(e, r) {
+  return new ae({
+    baseUrl: r.baseUrl,
+    endpoint: r.dashboardEndpoint,
+    authToken: r.authToken,
+    section: e,
+    perPage: r.perPage,
+    callbacks: {
+      onData: (t) => r.setData(t),
+      onPagination: (t) => r.setMeta(t),
+      onLoading: (t) => r.setIsLoading(t),
+      onError: (t) => r.setError(t),
+      onUnauthorized: () => {
+      }
+    }
+  });
+}
+function $e(e, r) {
+  e.ctrl.configure(r);
+  const t = e.prevSection !== e.section;
+  return t || !e.hasFetched ? (t ? e.ctrl.setSection(e.section) : e.ctrl.start(), !0) : (e.ctrl.start(), e.hasFetched);
+}
+function xe() {
+  const [e, r] = w(null), [t, n] = w(null), [o, l] = w(!0), [b, a] = w(null);
+  return { data: e, setData: r, meta: t, setMeta: n, isLoading: o, setIsLoading: l, error: b, setError: a };
+}
+function Ie(e) {
+  const r = x(() => {
+    e.current?.fetch(!0);
+  }, [e]), t = x(
+    async (o, l = "post", b) => {
+      const a = e.current;
+      if (!a) throw new Error("Dashboard controller not initialized");
+      return a.mutate(o, l, b);
+    },
+    [e]
+  ), n = x(() => {
+    const o = e.current;
+    if (!o) throw new Error("Dashboard controller not initialized");
+    return o.getApi();
+  }, [e]);
+  return { refresh: r, mutate: t, getApi: n };
+}
+function Me(e, r, t, n) {
+  e.current || (e.current = Ee(r, {
+    ...t,
+    setData: (o) => n.setData(o),
+    setMeta: n.setMeta,
+    setIsLoading: n.setIsLoading,
+    setError: n.setError
+  }));
+}
+function Be(e) {
+  return {
+    baseUrl: e.baseUrl ?? "",
+    dashboardEndpoint: e.dashboardEndpoint ?? "/__stats/api",
+    authToken: e.authToken,
+    page: e.page ?? 1,
+    perPage: e.perPage ?? 50,
+    search: e.search,
+    sort: e.sort,
+    sortDir: e.sortDir,
+    filters: e.filters,
+    timeRange: e.timeRange,
+    refreshKey: e.refreshKey
+  };
+}
+function De(e, r = {}) {
+  const t = Be(r), n = xe(), o = O(null), l = O(e), b = O(!1);
+  Me(o, e, t, n), B(() => {
+    const v = l.current;
+    return l.current = e, b.current = $e(
+      {
+        ctrl: o.current,
+        section: e,
+        prevSection: v,
+        hasFetched: b.current
+      },
+      t
+    ), () => {
+      o.current.stop();
+    };
+  }, [
+    e,
+    t.page,
+    t.perPage,
+    t.search,
+    t.sort,
+    t.sortDir,
+    t.filters,
+    t.timeRange,
+    t.refreshKey
+  ]);
+  const a = Ie(o);
+  return {
+    data: n.data,
+    meta: n.meta,
+    isLoading: n.isLoading,
+    error: n.error,
+    ...a
+  };
+}
+const Re = [
+  "overview",
+  "requests",
+  "queries",
+  "events",
+  "routes",
+  "logs",
+  "emails",
+  "cache",
+  "jobs",
+  "config",
+  "internals"
+], Oe = T(() => import("./OverviewSection-DOMu2qvl.js")), _e = T(() => import("./RequestsSection-CC-eVHsl.js")), je = T(() => import("./QueriesSection-DFsaOSJI.js")), Pe = T(() => import("./EventsSection-CapH5xut.js")), He = T(() => import("./RoutesSection-p1DMq41y.js")), Ue = T(() => import("./LogsSection-ConXdBkL.js")), qe = T(() => import("./EmailsSection-vYx6ExTb.js")), Fe = T(() => import("./CacheSection-DkLtukWz.js")), ze = T(() => import("./JobsSection-ZIQsJWid.js")), Ae = T(() => import("./ConfigSection-DaVbFPDg.js")), We = T(() => import("./InternalsSection-lOv_UcSV.js"));
+function Ye(e) {
+  const {
+    baseUrl: r = "",
+    dashboardEndpoint: t = "/__stats/api",
+    debugEndpoint: n,
+    authToken: o,
+    backUrl: l = "/",
+    channelName: b = "server-stats/dashboard"
+  } = e, { features: a } = q({ baseUrl: r, debugEndpoint: n, authToken: o }), { theme: v, toggleTheme: m } = F(), [u, d] = w("overview"), f = O(u);
+  f.current = u;
+  const [g, p] = w(() => typeof window > "u" ? !1 : localStorage.getItem("ss-dash-sidebar") === "collapsed"), [S, R] = w(!1), [I, k] = w(0), y = O(0);
+  B(() => {
+    if (!b) return;
+    const h = ie({
+      baseUrl: r,
+      channelName: b,
+      authToken: o,
+      onMessage: () => {
+        y.current += 1, k(y.current);
+      },
+      onConnect: () => R(!0),
+      onDisconnect: () => R(!1),
+      onError: () => R(!1)
+    });
+    return () => h.unsubscribe();
+  }, [r, b, o]);
+  const $ = a.customPanes || [], _ = x(
+    (h) => {
+      const E = h.replace("#", "").split("?")[0];
+      return E && [...Re, ...$.map((J) => J.id)].includes(E) ? E : "overview";
+    },
+    [$]
+  );
+  B(() => {
+    if (typeof window > "u") return;
+    const h = _(window.location.hash);
+    (h !== "overview" || window.location.hash) && d(h);
+  }, [_]), B(() => {
+    const h = () => {
+      const E = _(window.location.hash);
+      E !== f.current && d(E);
+    };
+    return window.addEventListener("hashchange", h), () => window.removeEventListener("hashchange", h);
+  }, [_]), B(() => {
+    typeof window > "u" || (window.location.hash = u);
+  }, [u]);
+  const N = x(() => {
+    p((h) => {
+      const E = !h;
+      return localStorage.setItem("ss-dash-sidebar", E ? "collapsed" : "expanded"), E;
+    });
+  }, []), i = D(
+    () => [
+      { id: "overview", label: "Overview", visible: !0 },
+      { id: "requests", label: "Requests", visible: !0 },
+      { id: "queries", label: "Queries", visible: !0 },
+      { id: "events", label: "Events", visible: !0 },
+      { id: "routes", label: "Routes", visible: !0 },
+      { id: "logs", label: "Logs", visible: !0 },
+      { id: "emails", label: "Emails", visible: !0 },
+      { id: "cache", label: "Cache", visible: a.cache },
+      { id: "jobs", label: "Jobs", visible: a.queues },
+      { id: "config", label: "Config", visible: !0 },
+      { id: "internals", label: "Internals", visible: !0 }
+    ],
+    [a]
+  ), L = D(() => i.filter((h) => h.visible), [i]), M = D(
+    () => ({ baseUrl: r, dashboardEndpoint: t, authToken: o, refreshKey: I }),
+    [r, t, o, I]
+  ), { data: j } = De("overview", M), W = D(() => {
+    if (!j) return {};
+    const h = {};
+    if (j.totalRequests > 0 && (h.requests = { count: j.totalRequests }), j.queryStats?.total > 0 && (h.queries = { count: j.queryStats.total }), j.logLevelBreakdown) {
+      const E = j.logLevelBreakdown, H = E.error + E.warn + E.info + E.debug;
+      H > 0 && (h.logs = { count: H });
+    }
+    return h;
+  }, [j]), K = x(() => {
+    const h = {
+      overview: /* @__PURE__ */ s(Oe, { options: M }),
+      requests: /* @__PURE__ */ s(_e, { options: M }),
+      queries: /* @__PURE__ */ s(je, { options: M }),
+      events: /* @__PURE__ */ s(Pe, { options: M }),
+      routes: /* @__PURE__ */ s(He, { options: M }),
+      logs: /* @__PURE__ */ s(Ue, { options: M }),
+      emails: /* @__PURE__ */ s(qe, { options: M }),
+      cache: /* @__PURE__ */ s(Fe, { options: M }),
+      jobs: /* @__PURE__ */ s(ze, { options: M }),
+      config: /* @__PURE__ */ s(Ae, { options: M }),
+      internals: /* @__PURE__ */ s(We, { options: M, debugEndpoint: n })
+    };
+    return /* @__PURE__ */ s("div", { className: "ss-dash-pane ss-dash-active", id: `ss-dash-pane-${u}`, children: /* @__PURE__ */ s("div", { className: "ss-dash-pane-inner", children: /* @__PURE__ */ s(z, { fallback: /* @__PURE__ */ s("div", { className: "ss-dash-empty", children: "Loading..." }), children: h[u] || /* @__PURE__ */ s("div", { className: "ss-dash-empty", children: "Unknown section" }) }) }) });
+  }, [u, M]);
+  return /* @__PURE__ */ c("div", { className: "ss-dash", "data-theme": v, id: "ss-dash", children: [
+    /* @__PURE__ */ c("div", { className: "ss-dash-header", children: [
+      /* @__PURE__ */ c("div", { className: "ss-dash-header-left", children: [
+        /* @__PURE__ */ s("span", { className: "ss-dash-logo", children: "Server Stats" }),
+        /* @__PURE__ */ s("span", { className: "ss-dash-logo-sub", children: "Dashboard" })
+      ] }),
+      /* @__PURE__ */ c("div", { className: "ss-dash-header-center", children: [
+        /* @__PURE__ */ s(
+          "span",
+          {
+            className: `ss-dash-live-dot ${S ? "ss-dash-connected" : ""}`,
+            id: "ss-dash-live-dot"
+          }
+        ),
+        /* @__PURE__ */ s(
+          "span",
+          {
+            className: `ss-dash-live-label ${S ? "ss-dash-connected" : ""}`,
+            id: "ss-dash-live-label",
+            children: S ? "Live" : "Polling"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ c("div", { className: "ss-dash-header-right", children: [
+        /* @__PURE__ */ s(A, { theme: v, onToggle: m }),
+        l && /* @__PURE__ */ s("a", { href: l, className: "ss-dash-back-link", title: "Back to app", children: "← App" })
+      ] })
+    ] }),
+    /* @__PURE__ */ c("div", { className: "ss-dash-body", children: [
+      /* @__PURE__ */ c(
+        "div",
+        {
+          className: `ss-dash-sidebar ${g ? "ss-dash-collapsed" : ""}`,
+          id: "ss-dash-sidebar",
+          children: [
+            /* @__PURE__ */ c("nav", { className: "ss-dash-nav", role: "tablist", children: [
+              L.map((h) => {
+                const E = W[h.id];
+                return /* @__PURE__ */ c(
+                  "button",
+                  {
+                    type: "button",
+                    role: "tab",
+                    "aria-selected": u === h.id,
+                    className: `ss-dash-nav-item ${u === h.id ? "ss-dash-active" : ""}`,
+                    "data-ss-section": h.id,
+                    onClick: () => {
+                      h.id !== u && d(h.id);
+                    },
+                    title: g ? h.label : void 0,
+                    children: [
+                      /* @__PURE__ */ s("span", { className: "ss-dash-nav-icon", children: /* @__PURE__ */ s(
+                        "svg",
+                        {
+                          width: "20",
+                          height: "20",
+                          viewBox: (C[h.id] || C.config).viewBox,
+                          fill: "none",
+                          stroke: "currentColor",
+                          strokeWidth: "2",
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round",
+                          dangerouslySetInnerHTML: {
+                            __html: (C[h.id] || C.config).elements.join("")
+                          }
+                        }
+                      ) }),
+                      /* @__PURE__ */ s("span", { className: "ss-dash-nav-label", children: h.label }),
+                      E && E.count > 0 && /* @__PURE__ */ s(
+                        "span",
+                        {
+                          className: `ss-dash-nav-badge${E.variant ? " " + E.variant : ""}`,
+                          children: E.count
+                        }
+                      )
+                    ]
+                  },
+                  h.id
+                );
+              }),
+              $.length > 0 && /* @__PURE__ */ s("div", { className: "ss-dash-nav-sep" }),
+              $.map((h) => /* @__PURE__ */ c(
+                "button",
+                {
+                  type: "button",
+                  role: "tab",
+                  "aria-selected": u === h.id,
+                  className: `ss-dash-nav-item ${u === h.id ? "ss-dash-active" : ""}`,
+                  onClick: () => d(h.id),
+                  title: g ? h.label : void 0,
+                  children: [
+                    /* @__PURE__ */ s("span", { className: "ss-dash-nav-icon", children: /* @__PURE__ */ s(
+                      "svg",
+                      {
+                        width: "20",
+                        height: "20",
+                        viewBox: C["custom-pane"].viewBox,
+                        fill: "none",
+                        stroke: "currentColor",
+                        strokeWidth: "2",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        dangerouslySetInnerHTML: { __html: C["custom-pane"].elements.join("") }
+                      }
+                    ) }),
+                    /* @__PURE__ */ s("span", { className: "ss-dash-nav-label", children: h.label })
+                  ]
+                },
+                h.id
+              ))
+            ] }),
+            /* @__PURE__ */ s(
+              "button",
+              {
+                type: "button",
+                className: "ss-dash-sidebar-toggle",
+                id: "ss-dash-sidebar-toggle",
+                onClick: N,
+                title: g ? "Expand sidebar" : "Collapse sidebar",
+                children: g ? /* @__PURE__ */ s(
+                  "svg",
+                  {
+                    width: "16",
+                    height: "16",
+                    viewBox: C["chevron-right"].viewBox,
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "1.5",
+                    dangerouslySetInnerHTML: { __html: C["chevron-right"].elements.join("") }
+                  }
+                ) : /* @__PURE__ */ s(
+                  "svg",
+                  {
+                    width: "16",
+                    height: "16",
+                    viewBox: C["chevron-left"].viewBox,
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "1.5",
+                    dangerouslySetInnerHTML: { __html: C["chevron-left"].elements.join("") }
+                  }
+                )
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ s("div", { className: "ss-dash-main", children: K() })
+    ] })
+  ] });
+}
+function Ze(e, r = {}) {
+  const { baseUrl: t = "", debugEndpoint: n = "/admin/api/debug", authToken: o } = r, [l, b] = w(null), [a, v] = w(!0), [m, u] = w(null), d = O(null), f = O(null), g = () => new le({
+    baseUrl: t,
+    endpoint: n,
+    authToken: o,
+    onData: (k) => b(k),
+    onLoading: (k) => v(k),
+    onError: (k) => u(k),
+    onUnauthorized: (k) => u(k)
+  }), p = `${t}\0${n}\0${o ?? ""}`;
+  (!d.current || f.current !== p) && (d.current?.stop(), d.current = g(), f.current = p), B(() => {
+    const k = d.current;
+    return k.start(e), () => k.stop();
+  }, [e, p]);
+  const S = x(() => {
+    d.current?.refresh();
+  }, []), R = x(() => {
+    b(null);
+  }, []), I = x((k, y) => {
+    d.current?.cacheForTab(k, y);
+  }, []);
+  return { data: l, isLoading: a, error: m, refresh: S, clearData: R, cacheForTab: I };
+}
+function es({
+  color: e = "muted",
+  children: r,
+  className: t = "",
+  classPrefix: n = "ss-dash"
+}) {
+  return /* @__PURE__ */ s("span", { className: `${n}-badge ${n}-badge-${e} ${t}`, children: r });
+}
+function ss({ method: e, className: r = "", classPrefix: t = "ss-dash" }) {
+  return /* @__PURE__ */ s(
+    "span",
+    {
+      className: `${t}-method ${t}-method-${e.toLowerCase()} ${r}`,
+      children: e
+    }
+  );
+}
+function ts({ code: e, className: r = "", classPrefix: t = "ss-dash" }) {
+  let n = `${t}-status-2xx`;
+  return e >= 500 ? n = `${t}-status-5xx` : e >= 400 ? n = `${t}-status-4xx` : e >= 300 && (n = `${t}-status-3xx`), /* @__PURE__ */ s("span", { className: `${t}-status ${n} ${r}`, children: e });
+}
+function ns({
+  data: e,
+  maxPreviewLength: r = 100,
+  className: t = "",
+  classPrefix: n = "ss-dash",
+  defaultExpanded: o = !1
+}) {
+  const [l, b] = w(o), a = D(() => {
+    if (typeof e == "string")
+      try {
+        return JSON.parse(e);
+      } catch {
+        return e;
+      }
+    return e;
+  }, [e]), v = D(() => typeof a == "object" && a !== null ? ce(a, r) : String(a ?? "-"), [a, r]), m = D(() => typeof a == "object" && a !== null ? JSON.stringify(a, null, 2) : String(a), [a]), u = x(() => {
+    b((f) => !f);
+  }, []), d = x(async () => {
+    try {
+      await navigator.clipboard.writeText(m);
+    } catch {
+    }
+  }, [m]);
+  return !e && e !== 0 && e !== !1 ? /* @__PURE__ */ s("span", { className: `ss-dim ${n}-c-dim`, children: "-" }) : /* @__PURE__ */ c("div", { className: `${n}-data-cell ${t}`, children: [
+    !l && /* @__PURE__ */ s(
+      "span",
+      {
+        className: `${n}-data-preview`,
+        onClick: u,
+        role: "button",
+        tabIndex: 0,
+        onKeyDown: (f) => f.key === "Enter" && u(),
+        children: v
+      }
+    ),
+    l && /* @__PURE__ */ c("div", { className: `${n}-data-full`, onClick: u, children: [
+      /* @__PURE__ */ s(
+        "button",
+        {
+          className: `${n}-copy-btn`,
+          onClick: (f) => {
+            f.stopPropagation(), d();
+          },
+          title: "Copy to clipboard",
+          type: "button",
+          children: "Copy"
+        }
+      ),
+      /* @__PURE__ */ s("pre", { children: m })
+    ] })
+  ] });
+}
+function rs({ content: e, children: r, position: t = "top", className: n = "" }) {
+  const [o, l] = w(!1), [b, a] = w({ left: 0, bottom: 0 }), v = O(null), m = O(null), u = x(() => {
+    l(!0);
+  }, []), d = x(() => {
+    l(!1);
+  }, []);
+  return B(() => {
+    if (!o || !v.current || !m.current) return;
+    const f = v.current.getBoundingClientRect(), g = m.current.getBoundingClientRect();
+    let p = f.left + f.width / 2 - g.width / 2, S;
+    p < 8 && (p = 8), p + g.width > window.innerWidth - 8 && (p = window.innerWidth - 8 - g.width), t === "top" && (S = window.innerHeight - f.top + 8), a({ left: p, bottom: S ?? 0 });
+  }, [o, t]), /* @__PURE__ */ c(
+    "div",
+    {
+      ref: v,
+      className: `ss-tooltip-trigger ${n}`,
+      onMouseEnter: u,
+      onMouseLeave: d,
+      style: { display: "inline-flex", position: "relative" },
+      children: [
+        r,
+        o && /* @__PURE__ */ c(
+          "div",
+          {
+            ref: m,
+            className: "ss-tooltip",
+            style: {
+              position: "fixed",
+              left: `${b.left}px`,
+              bottom: t === "top" ? `${b.bottom}px` : void 0,
+              zIndex: 200,
+              pointerEvents: "none"
+            },
+            children: [
+              /* @__PURE__ */ s("div", { className: "ss-tooltip-inner", children: e }),
+              /* @__PURE__ */ s("div", { className: "ss-tooltip-arrow" })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  es as B,
+  Ye as D,
+  ns as J,
+  ss as M,
+  ts as S,
+  A as T,
+  De as a,
+  he as b,
+  Xe as c,
+  Qe as d,
+  rs as e,
+  q as f,
+  ue as g,
+  F as h,
+  Ze as u
+};