adonisjs-server-stats 1.9.0 → 1.10.3

package/dist/react/RequestsSection-kW79_M7k.js

@@ -0,0 +1,341 @@
+import { jsx as t, jsxs as r, Fragment as j } from "react/jsx-runtime";
+import { useMemo as q, useState as f, useEffect as M, useCallback as L, useRef as C } from "react";
+import { normalizeTraceFields as z, durationSeverity as _, timeAgo as W, formatTime as G, initSplitPane as I } from "adonisjs-server-stats/core";
+import { u as U } from "./useApiClient-BVtNCmnL.js";
+import { a as Y, M as D, b as A } from "./index-CsImORX6.js";
+import { R as V } from "./RelatedLogs-3A8RuGKH.js";
+import { D as H } from "./DataTable-YyShr5B-.js";
+import { F as J } from "./FilterBar-CQ7bD669.js";
+import { P as K } from "./Pagination-BkmzUDY8.js";
+const F = {
+  request: "#1e3a5f",
+  middleware: "rgba(30, 58, 95, 0.7)",
+  db: "#6d28d9",
+  view: "#0e7490",
+  mail: "#059669",
+  event: "#b45309",
+  custom: "var(--ss-dim)"
+}, Q = {
+  request: "Request",
+  middleware: "Middleware",
+  db: "DB",
+  mail: "Mail",
+  event: "Event",
+  view: "View",
+  custom: "Custom"
+};
+function O({
+  spans: c,
+  totalDuration: i,
+  className: m = "",
+  warnings: d
+}) {
+  const h = c || [], o = q(
+    () => [...h].sort((e, n) => e.startOffset - n.startOffset),
+    [h]
+  ), p = q(() => {
+    const e = {};
+    for (const n of o)
+      e[n.id] = n.parentId ? (e[n.parentId] || 0) + 1 : 0;
+    return e;
+  }, [o]);
+  return h.length === 0 ? /* @__PURE__ */ t("div", { className: "ss-dash-empty", children: "No spans recorded" }) : /* @__PURE__ */ r("div", { className: `ss-dash-tl-waterfall ${m}`, children: [
+    /* @__PURE__ */ t("div", { className: "ss-dash-tl-legend", children: Object.entries(Q).map(([e, n]) => /* @__PURE__ */ r("div", { className: "ss-dash-tl-legend-item", children: [
+      /* @__PURE__ */ t(
+        "span",
+        {
+          className: "ss-dash-tl-legend-dot",
+          style: {
+            background: F[e] || F.custom
+          }
+        }
+      ),
+      /* @__PURE__ */ t("span", { children: n })
+    ] }, e)) }),
+    o.map((e) => {
+      const n = i > 0 ? e.startOffset / i * 100 : 0, y = i > 0 ? Math.max(e.duration / i * 100, 0.5) : 1, v = p[e.id] || 0, S = e.label.length > 50 ? e.label.slice(0, 50) + "..." : e.label, g = e.category === "db" ? "DB" : e.category, N = e.category === "db" ? "purple" : e.category === "mail" ? "green" : e.category === "event" ? "amber" : e.category === "view" ? "blue" : "muted", u = e.metadata ? Object.entries(e.metadata).filter(([, b]) => b != null).map(([b, x]) => `${b}=${x}`).join(", ") : "", w = u ? `${e.label} (${e.duration.toFixed(2)}ms)
+${u}` : `${e.label} (${e.duration.toFixed(2)}ms)`;
+      return /* @__PURE__ */ r("div", { className: "ss-dash-tl-row", children: [
+        /* @__PURE__ */ r(
+          "div",
+          {
+            className: "ss-dash-tl-label",
+            title: w,
+            style: { paddingLeft: 8 + v * 16 + "px" },
+            children: [
+              /* @__PURE__ */ t(
+                "span",
+                {
+                  className: `ss-dash-badge ss-dash-badge-${N}`,
+                  style: { fontSize: "9px", marginRight: "4px" },
+                  children: g
+                }
+              ),
+              S
+            ]
+          }
+        ),
+        /* @__PURE__ */ t("div", { className: "ss-dash-tl-track", children: /* @__PURE__ */ t(
+          "div",
+          {
+            className: `ss-dash-tl-bar ss-dash-tl-bar-${e.category || "custom"}`,
+            style: {
+              left: `${n}%`,
+              width: `${y}%`
+            },
+            title: w
+          }
+        ) }),
+        /* @__PURE__ */ r("span", { className: "ss-dash-tl-dur", children: [
+          e.duration.toFixed(2),
+          "ms"
+        ] })
+      ] }, e.id);
+    }),
+    d && d.length > 0 && /* @__PURE__ */ r("div", { className: "ss-dash-tl-warnings", children: [
+      /* @__PURE__ */ r("div", { className: "ss-dash-tl-warnings-title", children: [
+        "Warnings (",
+        d.length,
+        ")"
+      ] }),
+      d.map((e, n) => /* @__PURE__ */ t("div", { className: "ss-dash-tl-warning", children: e }, n))
+    ] })
+  ] });
+}
+function X({
+  children: c,
+  classPrefix: i = "ss-dash",
+  storageKey: m
+}) {
+  const d = C(null), h = C(null), o = C(null), p = C(null);
+  return M(() => {
+    if (d.current && h.current && o.current && p.current)
+      return I({
+        container: d.current,
+        handle: h.current,
+        topPane: o.current,
+        bottomPane: p.current,
+        storageKey: m
+      });
+  }, [m]), /* @__PURE__ */ r("div", { ref: d, className: `${i}-split-container`, children: [
+    /* @__PURE__ */ t("div", { ref: o, className: `${i}-split-top`, children: c[0] }),
+    /* @__PURE__ */ t("div", { ref: h, className: `${i}-split-handle` }),
+    /* @__PURE__ */ t("div", { ref: p, className: `${i}-split-bottom`, children: c[1] })
+  ] });
+}
+function oe({ options: c = {} }) {
+  const [i, m] = f(1), [d, h] = f(""), [o, p] = f("createdAt"), [e, n] = f("desc"), [y, v] = f(null), [S, g] = f(!1);
+  M(() => m(1), [d]);
+  const { data: N, meta: u, isLoading: w, error: b } = Y("requests", {
+    ...c,
+    page: i,
+    search: d,
+    sort: o,
+    sortDir: e
+  }), x = U(c.baseUrl || "", c.authToken), P = L(
+    (s) => {
+      const a = s.id;
+      g(!0);
+      const l = c.dashboardEndpoint || "/__stats/api";
+      x().fetch(`${l}/requests/${a}`).then((k) => {
+        const $ = k, R = $.trace;
+        if (R) {
+          const E = { ...$, ...R, logs: $.logs };
+          v(E);
+        } else
+          v(k);
+        g(!1);
+      }).catch(() => {
+        g(!1);
+      });
+    },
+    [x, c.dashboardEndpoint]
+  ), T = L(
+    (s) => {
+      o === s ? n((a) => a === "asc" ? "desc" : "asc") : (p(s), n("desc"));
+    },
+    [o]
+  ), B = N || [];
+  if (y) {
+    const s = z(y), a = s.logs.length > 0;
+    return /* @__PURE__ */ r("div", { children: [
+      /* @__PURE__ */ r("div", { className: "ss-dash-tl-detail-header", children: [
+        /* @__PURE__ */ t("button", { type: "button", className: "ss-dash-btn", onClick: () => v(null), children: "← Back to Requests" }),
+        /* @__PURE__ */ t(D, { method: s.method }),
+        /* @__PURE__ */ t("span", { style: { color: "var(--ss-text)" }, children: s.url }),
+        /* @__PURE__ */ t(A, { code: s.statusCode }),
+        /* @__PURE__ */ r("span", { className: "ss-dash-tl-meta", children: [
+          s.totalDuration.toFixed(1),
+          "ms · ",
+          s.spanCount,
+          " spans"
+        ] })
+      ] }),
+      a ? /* @__PURE__ */ r(X, { classPrefix: "ss-dash", storageKey: "ss-requests-split", children: [
+        /* @__PURE__ */ t(
+          O,
+          {
+            spans: s.spans,
+            totalDuration: s.totalDuration,
+            warnings: s.warnings
+          }
+        ),
+        /* @__PURE__ */ t(V, { logs: s.logs, classPrefix: "ss-dash" })
+      ] }) : /* @__PURE__ */ t(
+        O,
+        {
+          spans: s.spans,
+          totalDuration: s.totalDuration,
+          warnings: s.warnings
+        }
+      )
+    ] });
+  }
+  return S ? /* @__PURE__ */ r("div", { children: [
+    /* @__PURE__ */ t("div", { className: "ss-dash-tl-detail-header", children: /* @__PURE__ */ t("button", { type: "button", className: "ss-dash-btn", onClick: () => g(!1), children: "← Back to Requests" }) }),
+    /* @__PURE__ */ t("div", { className: "ss-dash-empty", children: "Loading request detail..." })
+  ] }) : /* @__PURE__ */ r("div", { children: [
+    /* @__PURE__ */ t(
+      J,
+      {
+        search: d,
+        onSearchChange: h,
+        placeholder: "Filter requests...",
+        summary: `${u?.total ?? 0} requests`
+      }
+    ),
+    b && /* @__PURE__ */ t("div", { className: "ss-dash-empty", children: "Failed to load requests" }),
+    w && !N ? /* @__PURE__ */ t("div", { className: "ss-dash-empty", children: "Loading requests..." }) : /* @__PURE__ */ r(j, { children: [
+      /* @__PURE__ */ t("div", { className: "ss-dash-table-wrap", children: /* @__PURE__ */ t(
+        H,
+        {
+          columns: [
+            {
+              key: "id",
+              label: "#",
+              width: "40px",
+              render: (s) => /* @__PURE__ */ t("span", { style: { color: "var(--ss-dim)" }, children: s })
+            },
+            {
+              key: "method",
+              label: "Method",
+              width: "70px",
+              sortable: !0,
+              render: (s) => /* @__PURE__ */ t(D, { method: s })
+            },
+            {
+              key: "url",
+              label: "URL",
+              sortable: !0,
+              render: (s) => /* @__PURE__ */ t(
+                "span",
+                {
+                  style: {
+                    color: "var(--ss-text)",
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                    whiteSpace: "nowrap"
+                  },
+                  title: s,
+                  children: s
+                }
+              )
+            },
+            {
+              key: "statusCode",
+              label: "Status",
+              width: "60px",
+              sortable: !0,
+              render: (s, a) => {
+                const l = a.status_code || a.statusCode || a.statusCode;
+                return /* @__PURE__ */ t(A, { code: l });
+              }
+            },
+            {
+              key: "duration",
+              label: "Duration",
+              width: "80px",
+              sortable: !0,
+              render: (s, a) => {
+                const l = a.total_duration || a.totalDuration || a.duration || 0;
+                return /* @__PURE__ */ r(
+                  "span",
+                  {
+                    className: `ss-dash-duration ${_(l) === "very-slow" ? "ss-dash-very-slow" : _(l) === "slow" ? "ss-dash-slow" : ""}`,
+                    children: [
+                      l.toFixed(1),
+                      "ms"
+                    ]
+                  }
+                );
+              }
+            },
+            {
+              key: "spanCount",
+              label: "Spans",
+              width: "50px",
+              render: (s, a) => {
+                const l = a.span_count || a.spanCount || 0;
+                return /* @__PURE__ */ t("span", { style: { color: "var(--ss-muted)", textAlign: "center" }, children: l });
+              }
+            },
+            {
+              key: "warningCount",
+              label: "⚠",
+              width: "40px",
+              render: (s, a) => {
+                const l = a.warning_count || a.warningCount || 0;
+                return l > 0 ? /* @__PURE__ */ t(
+                  "span",
+                  {
+                    style: {
+                      color: "var(--ss-amber-fg)",
+                      textAlign: "center",
+                      display: "block"
+                    },
+                    children: l
+                  }
+                ) : /* @__PURE__ */ t(
+                  "span",
+                  {
+                    style: { color: "var(--ss-dim)", textAlign: "center", display: "block" },
+                    children: "-"
+                  }
+                );
+              }
+            },
+            {
+              key: "createdAt",
+              label: "Time",
+              width: "80px",
+              sortable: !0,
+              render: (s, a) => {
+                const l = a.createdAt || a.created_at || a.timestamp || "";
+                return /* @__PURE__ */ t("span", { className: "ss-dash-event-time", title: G(l), children: W(l) });
+              }
+            }
+          ],
+          data: B,
+          sort: o,
+          sortDir: e,
+          onSort: T,
+          onRowClick: P,
+          emptyMessage: "No requests recorded yet"
+        }
+      ) }),
+      u && /* @__PURE__ */ t(
+        K,
+        {
+          page: u.page,
+          lastPage: u.lastPage,
+          total: u.total,
+          onPageChange: m
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  oe as RequestsSection,
+  oe as default
+};

package/dist/react/{RoutesSection-CRqF-cNM.js → RoutesSection-BRhxrtjZ.js}

@@ -1,8 +1,8 @@
 import { jsxs as m, jsx as r, Fragment as p } from "react/jsx-runtime";
 import { useState as y } from "react";
-import { a as u, M as f } from "./index-CecA4IdQ.js";
+import { a as u, M as f } from "./index-CsImORX6.js";
 import { D as w } from "./DataTable-YyShr5B-.js";
-import { F as b } from "./FilterBar-DQRXpWrb.js";
+import { F as b } from "./FilterBar-CQ7bD669.js";
 function A({ options: n = {} }) {
   const [s, i] = y(""), { data: l, isLoading: c, error: h } = u("routes", { ...n, search: s }), a = l, o = Array.isArray(a) ? a : a && Array.isArray(a.routes) ? a.routes : a && Array.isArray(a.data) ? a.data : [], t = {
     overflow: "hidden",

package/dist/react/RoutesTab-CpYH5lUw.js

@@ -0,0 +1,68 @@
+import { jsx as e, jsxs as d } from "react/jsx-runtime";
+import { useState as g, useMemo as p } from "react";
+import { u as b } from "./index-CsImORX6.js";
+import { u as f } from "./useResizableTable-CNJmACdt.js";
+import { F as w } from "./FilterBar-CQ7bD669.js";
+function $({ options: i, currentPath: n }) {
+  const { data: o, isLoading: h, error: c } = b("routes", i), [a, m] = g(""), l = p(() => {
+    const s = o?.routes || [];
+    if (!a) return s;
+    const r = a.toLowerCase();
+    return s.filter(
+      (t) => t.pattern.toLowerCase().includes(r) || t.handler.toLowerCase().includes(r) || t.method.toLowerCase().includes(r) || t.name && t.name.toLowerCase().includes(r)
+    );
+  }, [o, a]), u = f([l]);
+  return h && !o ? /* @__PURE__ */ e("div", { className: "ss-dbg-empty", children: "Loading routes..." }) : c ? /* @__PURE__ */ d("div", { className: "ss-dbg-empty", children: [
+    "Error: ",
+    c.message
+  ] }) : /* @__PURE__ */ d("div", { children: [
+    /* @__PURE__ */ e(
+      w,
+      {
+        search: a,
+        onSearchChange: m,
+        placeholder: "Filter routes...",
+        summary: `${l.length} routes`
+      }
+    ),
+    l.length === 0 ? /* @__PURE__ */ e("div", { className: "ss-dbg-empty", children: "No routes found" }) : /* @__PURE__ */ d("table", { ref: u, className: "ss-dbg-table", children: [
+      /* @__PURE__ */ d("colgroup", { children: [
+        /* @__PURE__ */ e("col", { style: { width: "70px" } }),
+        /* @__PURE__ */ e("col", { style: { width: "25%" } }),
+        /* @__PURE__ */ e("col", { style: { width: "15%" } }),
+        /* @__PURE__ */ e("col", {}),
+        /* @__PURE__ */ e("col", { style: { width: "20%" } })
+      ] }),
+      /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ d("tr", { children: [
+        /* @__PURE__ */ e("th", { children: "Method" }),
+        /* @__PURE__ */ e("th", { children: "Pattern" }),
+        /* @__PURE__ */ e("th", { children: "Name" }),
+        /* @__PURE__ */ e("th", { children: "Handler" }),
+        /* @__PURE__ */ e("th", { children: "Middleware" })
+      ] }) }),
+      /* @__PURE__ */ e("tbody", { children: l.map((s, r) => {
+        const t = n && (s.pattern === n || new RegExp("^" + s.pattern.replace(/:[^/]+/g, "[^/]+") + "$").test(
+          n
+        ));
+        return /* @__PURE__ */ d(
+          "tr",
+          {
+            className: t ? "ss-dbg-current-route" : "",
+            children: [
+              /* @__PURE__ */ e("td", { children: /* @__PURE__ */ e("span", { className: `ss-dbg-method ss-dbg-method-${s.method.toLowerCase()}`, children: s.method }) }),
+              /* @__PURE__ */ e("td", { className: "ss-dbg-c-text", children: s.pattern }),
+              /* @__PURE__ */ e("td", { className: "ss-dbg-c-muted", children: s.name || "-" }),
+              /* @__PURE__ */ e("td", { className: "ss-dbg-c-sql", children: s.handler }),
+              /* @__PURE__ */ e("td", { className: "ss-dbg-c-dim", style: { fontSize: "10px" }, children: s.middleware.length > 0 ? s.middleware.join(", ") : "-" })
+            ]
+          },
+          `${s.method}-${s.pattern}-${r}`
+        );
+      }) })
+    ] })
+  ] });
+}
+export {
+  $ as RoutesTab,
+  $ as default
+};

package/dist/react/TimelineTab-DjLR35Ce.js

@@ -0,0 +1,214 @@
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { useState as g, useMemo as j, useEffect as M, useCallback as E, useRef as v } from "react";
+import { formatDuration as w, durationSeverity as T, timeAgo as U, formatTime as W, initSplitPane as _ } from "adonisjs-server-stats/core";
+import { u as z } from "./useApiClient-BVtNCmnL.js";
+import { u as G } from "./index-CsImORX6.js";
+import { u as V } from "./useResizableTable-CNJmACdt.js";
+import { F as H } from "./FilterBar-CQ7bD669.js";
+import { R as J } from "./RelatedLogs-3A8RuGKH.js";
+function K({
+  children: o,
+  classPrefix: i = "ss-dbg",
+  storageKey: u
+}) {
+  const m = v(null), d = v(null), h = v(null), c = v(null);
+  return M(() => {
+    if (m.current && d.current && h.current && c.current)
+      return _({
+        container: m.current,
+        handle: d.current,
+        topPane: h.current,
+        bottomPane: c.current,
+        storageKey: u
+      });
+  }, [u]), /* @__PURE__ */ t("div", { ref: m, className: `${i}-split-container`, children: [
+    /* @__PURE__ */ e("div", { ref: h, className: `${i}-split-top`, children: o[0] }),
+    /* @__PURE__ */ e("div", { ref: d, className: `${i}-split-handle` }),
+    /* @__PURE__ */ e("div", { ref: c, className: `${i}-split-bottom`, children: o[1] })
+  ] });
+}
+const k = {
+  request: "#1e3a5f",
+  middleware: "rgba(30, 58, 95, 0.7)",
+  db: "#6d28d9",
+  view: "#0e7490",
+  mail: "#059669",
+  event: "#b45309",
+  custom: "#525252"
+}, Q = [
+  { label: "Request", color: "#1e3a5f" },
+  { label: "Middleware", color: "rgba(30, 58, 95, 0.7)" },
+  { label: "Database", color: "#6d28d9" },
+  { label: "View", color: "#0e7490" },
+  { label: "Mail", color: "#059669" },
+  { label: "Event", color: "#b45309" }
+];
+function re({ options: o }) {
+  const { baseUrl: i = "", debugEndpoint: u = "/admin/api/debug", authToken: m } = o || {}, { data: d, isLoading: h, error: c } = G("timeline", o), [b, A] = g(""), [p, y] = g(null), [a, L] = g(null), [B, C] = g(!1), [$, x] = g(null), f = j(() => {
+    const s = d?.traces || [];
+    if (!b) return s;
+    const n = b.toLowerCase();
+    return s.filter(
+      (r) => r.url.toLowerCase().includes(n) || r.method.toLowerCase().includes(n) || String(r.statusCode).includes(n)
+    );
+  }, [d, b]), D = z(i, m);
+  M(() => {
+    if (p === null) {
+      L(null), x(null);
+      return;
+    }
+    let s = !1;
+    return C(!0), x(null), D().get(`${u}/traces/${p}`).then((r) => {
+      s || (L(r), C(!1));
+    }).catch((r) => {
+      s || (x(r instanceof Error ? r.message : "Failed to load trace"), C(!1));
+    }), () => {
+      s = !0;
+    };
+  }, [p, u, D]);
+  const F = E((s) => {
+    y((n) => n === s ? null : s);
+  }, []), S = E((s) => s >= 500 ? "ss-dbg-status-5xx" : s >= 400 ? "ss-dbg-status-4xx" : s >= 300 ? "ss-dbg-status-3xx" : "ss-dbg-status-2xx", []), q = V([f]);
+  if (h && !d)
+    return /* @__PURE__ */ e("div", { className: "ss-dbg-empty", children: "Loading traces..." });
+  if (c)
+    return /* @__PURE__ */ t("div", { className: "ss-dbg-empty", children: [
+      "Error: ",
+      c.message
+    ] });
+  if (p !== null) {
+    if (B)
+      return /* @__PURE__ */ e("div", { className: "ss-dbg-empty", children: "Loading trace detail..." });
+    if ($)
+      return /* @__PURE__ */ t("div", { children: [
+        /* @__PURE__ */ e("div", { className: "ss-dbg-tl-detail-header", children: /* @__PURE__ */ e(
+          "button",
+          {
+            type: "button",
+            className: "ss-dbg-btn-clear",
+            onClick: () => y(null),
+            children: "← Back"
+          }
+        ) }),
+        /* @__PURE__ */ t("div", { className: "ss-dbg-empty", children: [
+          "Error: ",
+          $
+        ] })
+      ] });
+    if (!a)
+      return /* @__PURE__ */ e("div", { className: "ss-dbg-empty", children: "Loading trace detail..." });
+    const s = a.spans || [], n = a.warnings || [], r = a.logs || [], I = r.length > 0, R = /* @__PURE__ */ t("div", { children: [
+      /* @__PURE__ */ e("div", { className: "ss-dbg-tl-legend", children: Q.map((l) => /* @__PURE__ */ t("div", { className: "ss-dbg-tl-legend-item", children: [
+        /* @__PURE__ */ e("div", { className: "ss-dbg-tl-legend-dot", style: { background: l.color } }),
+        /* @__PURE__ */ e("span", { children: l.label })
+      ] }, l.label)) }),
+      /* @__PURE__ */ e("div", { style: { padding: "8px 12px", overflow: "auto" }, children: s.length === 0 ? /* @__PURE__ */ e("div", { className: "ss-dbg-empty", children: "No spans captured for this request" }) : s.map((l) => {
+        const N = a.totalDuration || 1, O = l.startOffset / N * 100, P = Math.max(l.duration / N * 100, 0.5);
+        return /* @__PURE__ */ t("div", { className: "ss-dbg-tl-row", children: [
+          /* @__PURE__ */ e("div", { className: "ss-dbg-tl-label", title: l.label, children: l.label }),
+          /* @__PURE__ */ e("div", { className: "ss-dbg-tl-track", children: /* @__PURE__ */ e(
+            "div",
+            {
+              className: `ss-dbg-tl-bar ss-dbg-tl-bar-${l.category}`,
+              style: {
+                left: `${O}%`,
+                width: `${P}%`,
+                background: k[l.category] || k.custom
+              },
+              title: `${l.label}: ${w(l.duration)}`
+            }
+          ) }),
+          /* @__PURE__ */ e("span", { className: "ss-dbg-tl-dur", children: w(l.duration) })
+        ] }, l.id);
+      }) }),
+      n.length > 0 && /* @__PURE__ */ t("div", { className: "ss-dbg-tl-warnings", children: [
+        /* @__PURE__ */ e("div", { className: "ss-dbg-tl-warnings-title", children: "Warnings" }),
+        n.map((l, N) => /* @__PURE__ */ e("div", { className: "ss-dbg-tl-warning", children: l }, N))
+      ] })
+    ] });
+    return /* @__PURE__ */ t("div", { className: "ss-dbg-tl-detail-wrapper", children: [
+      /* @__PURE__ */ t("div", { className: "ss-dbg-tl-detail-header", children: [
+        /* @__PURE__ */ e(
+          "button",
+          {
+            type: "button",
+            className: "ss-dbg-btn-clear",
+            onClick: () => y(null),
+            children: "← Back"
+          }
+        ),
+        /* @__PURE__ */ e("span", { className: `ss-dbg-method ss-dbg-method-${a.method.toLowerCase()}`, children: a.method }),
+        /* @__PURE__ */ e("span", { className: "ss-dbg-tl-detail-url", children: a.url }),
+        /* @__PURE__ */ e("span", { className: `ss-dbg-status ${S(a.statusCode)}`, children: a.statusCode }),
+        /* @__PURE__ */ t("span", { className: "ss-dbg-tl-meta", children: [
+          w(a.totalDuration),
+          " · ",
+          a.spanCount,
+          " spans"
+        ] })
+      ] }),
+      I ? /* @__PURE__ */ t(K, { classPrefix: "ss-dbg", storageKey: "ss-dbg-timeline-split", children: [
+        R,
+        /* @__PURE__ */ e(J, { logs: r, classPrefix: "ss-dbg" })
+      ] }) : R
+    ] });
+  }
+  return /* @__PURE__ */ t("div", { children: [
+    /* @__PURE__ */ e(
+      H,
+      {
+        search: b,
+        onSearchChange: A,
+        placeholder: "Filter traces...",
+        summary: `${f.length} traces`
+      }
+    ),
+    f.length === 0 ? /* @__PURE__ */ e("div", { className: "ss-dbg-empty", children: "No traces captured. Enable tracing in config." }) : /* @__PURE__ */ t("table", { ref: q, className: "ss-dbg-table", children: [
+      /* @__PURE__ */ t("colgroup", { children: [
+        /* @__PURE__ */ e("col", { style: { width: "50px" } }),
+        /* @__PURE__ */ e("col", { style: { width: "70px" } }),
+        /* @__PURE__ */ e("col", {}),
+        /* @__PURE__ */ e("col", { style: { width: "60px" } }),
+        /* @__PURE__ */ e("col", { style: { width: "80px" } }),
+        /* @__PURE__ */ e("col", { style: { width: "50px" } }),
+        /* @__PURE__ */ e("col", { style: { width: "80px" } })
+      ] }),
+      /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ t("tr", { children: [
+        /* @__PURE__ */ e("th", { children: "#" }),
+        /* @__PURE__ */ e("th", { children: "Method" }),
+        /* @__PURE__ */ e("th", { children: "URL" }),
+        /* @__PURE__ */ e("th", { children: "Status" }),
+        /* @__PURE__ */ e("th", { children: "Duration" }),
+        /* @__PURE__ */ e("th", { children: "Spans" }),
+        /* @__PURE__ */ e("th", { children: "Time" })
+      ] }) }),
+      /* @__PURE__ */ e("tbody", { children: f.map((s) => /* @__PURE__ */ t(
+        "tr",
+        {
+          className: "ss-dbg-email-row",
+          onClick: () => F(s.id),
+          children: [
+            /* @__PURE__ */ e("td", { className: "ss-dbg-c-dim", style: { whiteSpace: "nowrap" }, children: s.id }),
+            /* @__PURE__ */ e("td", { children: /* @__PURE__ */ e("span", { className: `ss-dbg-method ss-dbg-method-${s.method.toLowerCase()}`, children: s.method }) }),
+            /* @__PURE__ */ e("td", { title: s.url, children: s.url }),
+            /* @__PURE__ */ e("td", { children: /* @__PURE__ */ e("span", { className: `ss-dbg-status ${S(s.statusCode)}`, children: s.statusCode }) }),
+            /* @__PURE__ */ e(
+              "td",
+              {
+                className: `ss-dbg-duration ${T(s.totalDuration) === "very-slow" ? "ss-dbg-very-slow" : T(s.totalDuration) === "slow" ? "ss-dbg-slow" : ""}`,
+                children: w(s.totalDuration)
+              }
+            ),
+            /* @__PURE__ */ e("td", { className: "ss-dbg-c-muted", style: { textAlign: "center" }, children: s.spanCount }),
+            /* @__PURE__ */ e("td", { className: "ss-dbg-event-time", title: W(s.timestamp), children: U(s.timestamp) })
+          ]
+        },
+        s.id
+      )) })
+    ] })
+  ] });
+}
+export {
+  re as TimelineTab,
+  re as default
+};