@msqd/lydia 0.0.0-stage → 0.6.1

package/dist/Models/Transactions/facets.d.ts

@@ -0,0 +1,25 @@
+import type { FacetOption, FilterMeta } from "../Filters/index.js";
+import type { Transaction } from "./types.js";
+/** The facets a transaction list can be narrowed by. */
+export type TransactionFacetName = "endpoint" | "method" | "status" | "cacheStatus" | "flags" | "tags";
+/** Options offered by each facet. A facet with no entry offers nothing rather than something made up. */
+export type TransactionFacets = Partial<Record<Exclude<TransactionFacetName, "status">, FilterMeta[]>> & {
+    /** Status classes with their codes nested under them (ADR 0002). */
+    status?: FacetOption[];
+};
+/**
+ * Derives the facet options a list of transactions can offer, with their counts.
+ *
+ * **Derive from the full set you were handed, never from a page of it.** A facet count describes
+ * the dataset, so counting a page gives a number that disagrees with what a server would compute
+ * over the same data, while looking just as authoritative. This is the client-side counterpart of
+ * a server's facet query, and it is only correct while it sees everything.
+ *
+ * Counts are of the unfiltered set: selecting `GET` does not narrow the status counts. Narrowing
+ * each facet by the others is a different product behaviour, not a refinement of this one.
+ *
+ * `flags` is absent by construction. Flags are per-user state kept in their own table, keyed by
+ * user and transaction, so no transaction payload can answer that facet at all. Only a consumer
+ * that can ask the right question supplies those options.
+ */
+export declare function deriveTransactionFacets(transactions: Transaction[]): TransactionFacets;

package/dist/Models/Transactions/facets.js

@@ -0,0 +1,40 @@
+import { tagPairsOf as u, effectiveCacheStatus as i, statusGroupsOf as p, statusClassOrder as f, cacheStatusOrder as h } from "./encoding.js";
+const d = {
+  hit: "Cache Hit",
+  miss: "Cache Miss",
+  stale: "Stale",
+  bypass: "Bypass",
+  unknown: "Not reported"
+}, l = (e) => {
+  const t = /* @__PURE__ */ new Map();
+  for (const s of e)
+    t.set(s, (t.get(s) ?? 0) + 1);
+  return t;
+}, n = (e, t = (s) => s) => [...e.entries()].sort(([, s], [, r]) => r - s).map(([s, r]) => ({ name: s, label: t(s), count: r })), b = (e, t, s) => t.filter((r) => e.has(r)).map((r) => ({ name: r, label: s[r], count: e.get(r) ?? 0 })), m = {
+  1: "Informational",
+  2: "Success",
+  3: "Redirection",
+  4: "Client Error",
+  5: "Server Error"
+}, g = (e) => {
+  const t = l(e.flatMap(p)), s = t.get("failure"), r = f.filter((a) => t.has(a)).map((a) => ({
+    name: a,
+    label: `${a}xx`,
+    description: m[a],
+    count: t.get(a) ?? 0,
+    under: [...t.entries()].filter(([o]) => o.length === 3 && o.startsWith(a)).sort(([o], [c]) => Number(o) - Number(c)).map(([o, c]) => ({ name: o, label: o, count: c }))
+  }));
+  return s ? [...r, { name: "failure", label: "Failure", count: s }] : r;
+};
+function S(e) {
+  return {
+    endpoint: n(l(e.map((t) => t.url))),
+    method: n(l(e.map((t) => t.method))),
+    status: g(e),
+    cacheStatus: b(l(e.map(i)), h, d),
+    tags: n(l(e.flatMap(u)))
+  };
+}
+export {
+  S as deriveTransactionFacets
+};

package/dist/Models/Transactions/filtering.d.ts

@@ -0,0 +1,20 @@
+import { type Filters } from "../Filters/index.js";
+import type { Transaction } from "./types.js";
+export interface TransactionCriteria {
+    /** Facet selections, in the shape the facet components produce. */
+    filters?: Filters;
+    /** Free text term, matched against the fields the search placeholder promises. */
+    search?: string;
+}
+/**
+ * Applies facet selections and a search term to a list of transactions, in memory.
+ *
+ * This is the fallback for consumers with no filtering backend, not the recommended path: a
+ * consumer that fetches transactions from a server filters, searches and paginates there, where
+ * the whole dataset is. Filtering a page of results client-side narrows only that page.
+ *
+ * An inactive facet does not filter, so a transaction the facets say nothing about stays in the
+ * default view. `flags` are per-user state kept outside the transaction payload, so no transaction
+ * can answer them and the facet is ignored here.
+ */
+export declare function filterTransactions(transactions: Transaction[], criteria: TransactionCriteria): Transaction[];

package/dist/Models/Transactions/filtering.js

@@ -0,0 +1,34 @@
+import { effectiveCacheStatus as x, parseStatusSelection as D, statusClassOf as S, tagPairsOf as C } from "./encoding.js";
+import { readArray as d, readDates as v, readRange as T } from "../Filters/read.js";
+import { parseLocalDay as f } from "../Filters/dates.js";
+const w = (e) => [
+  e.url,
+  e.method,
+  String(e.statusCode),
+  e.apiName ?? ""
+], y = (e) => {
+  const { classes: s, codes: t, excluded: u, failure: r } = D(e);
+  return s.length + t.length === 0 && !r ? () => !0 : (n) => {
+    const o = String(n.statusCode);
+    return r && n.status === "Failed" || t.includes(o) || s.includes(S(n.statusCode)) && !u.includes(o);
+  };
+}, L = (e, s) => {
+  const t = new Date(e.timestamp), u = f(s.startDate ?? ""), r = f(s.endDate ?? "");
+  if (u && t < u)
+    return !1;
+  if (r) {
+    const n = new Date(r.getFullYear(), r.getMonth(), r.getDate() + 1);
+    return t < n;
+  }
+  return !0;
+}, b = (e, s) => e.tpdex === void 0 || s.min !== void 0 && e.tpdex < s.min ? !1 : !(s.max !== void 0 && e.tpdex > s.max), F = (e, s) => {
+  const t = C(e);
+  return s.some((u) => t.includes(u));
+};
+function A(e, s) {
+  const { filters: t = {}, search: u = "" } = s, r = u.trim().toLowerCase(), n = d(t, "endpoint"), o = d(t, "method"), m = y(d(t, "status")), i = d(t, "cacheStatus"), c = d(t, "tags"), h = v(t, "time"), l = T(t, "tpdex"), p = l.min !== void 0 || l.max !== void 0;
+  return e.filter((a) => r && !w(a).some((g) => g.toLowerCase().includes(r)) || n.length > 0 && !n.includes(a.url) || o.length > 0 && !o.includes(a.method) || !m(a) || i.length > 0 && !i.includes(x(a)) || c.length > 0 && !F(a, c) || !L(a, h) ? !1 : !(p && !b(a, l)));
+}
+export {
+  A as filterTransactions
+};

package/dist/Models/Transactions/treeDepth.d.ts

@@ -0,0 +1,2 @@
+/** Depth of the endpoint tree: the segments past it fold into one leaf, named by the rest of the path. Not re-exported by any barrel. */
+export declare const MAX_TREE_DEPTH = 64;

package/dist/Models/Transactions/treeDepth.js

@@ -0,0 +1,4 @@
+const E = 64;
+export {
+  E as MAX_TREE_DEPTH
+};

package/dist/Models/Transactions/types.d.ts

@@ -0,0 +1,58 @@
+import type { HttpBody } from "../Http/body.js";
+import type { HttpHeader } from "../Http/headers.js";
+/**
+ * HTTP content types for request/response bodies
+ */
+export type ContentType = "json" | "xml" | "text" | "html" | "image" | "binary";
+/**
+ * Base transaction model representing an HTTP API transaction
+ */
+export interface Transaction {
+    id: string;
+    url: string;
+    method: string;
+    status: "Successful" | "Pending" | "Failed";
+    statusCode: number;
+    timestamp: string;
+    responseTime: number;
+    client: string;
+    apiName?: string;
+    /**
+     * Arbitrary key/value annotations. HARP populates these from `x-harp-*` request
+     * headers, so both halves carry meaning and the value must not be discarded.
+     */
+    tags?: Record<string, string>;
+    userAgent?: string;
+    remoteAddress?: string;
+    cached?: boolean;
+    cacheStatus?: "hit" | "miss" | "stale" | "bypass";
+    /**
+     * TPDEX performance score, 0-100. Absent while a transaction is still running,
+     * since there is nothing to score yet. Never substitute a value for absence: a
+     * fabricated score is indistinguishable from a measured one. When absent and a
+     * score is needed, derive it with `calculateTpdexScore(responseTime)`.
+     */
+    tpdex?: number;
+}
+/**
+ * Flags such as "favorite" are deliberately absent from this model. They are per-user
+ * state, not transaction data: HARP keys them by (user, transaction, flag) in a separate
+ * table and mutates them through their own endpoint. A transaction payload cannot carry
+ * them, so they cannot be read from or filtered on one.
+ */
+/**
+ * HTTP message (request or response) with headers and body
+ */
+export interface HttpMessage {
+    headers: HttpHeader[];
+    body?: HttpBody;
+    contentType?: ContentType;
+    size?: number;
+}
+/**
+ * Detailed transaction model with HTTP request and response details
+ */
+export interface DetailedTransaction extends Transaction {
+    request: HttpMessage;
+    response: HttpMessage;
+}

package/dist/Models/Transactions/types.js

@@ -0,0 +1 @@
+

package/dist/Models/index.d.ts

@@ -0,0 +1,10 @@
+export * from "./Http/index.js";
+export * from "./Transactions/types.js";
+export * from "./Transactions/filtering.js";
+export * from "./Transactions/facets.js";
+export * from "./Transactions/endpoints.js";
+export * from "./Transactions/encoding.js";
+export * from "./Transactions/Overview.js";
+export * from "./System/types.js";
+export * from "./Tpdex.js";
+export * from "./Filters/index.js";

package/dist/Models/index.js

@@ -0,0 +1,46 @@
+import { filterTransactions as a } from "./Transactions/filtering.js";
+import { deriveTransactionFacets as s } from "./Transactions/facets.js";
+import { UNKNOWN_API as c, apiOf as i, isUnder as p, segmentsOf as f } from "./Transactions/endpoints.js";
+import { cacheStatusOrder as u, canonicalStatusToken as x, effectiveCacheStatus as d, parseStatusSelection as n, statusClassOf as m, statusClassOrder as S, statusGroupsOf as g, tagPairsOf as T } from "./Transactions/encoding.js";
+import { circuitBreakerStatusMap as h, healthStatusMap as A, isCircuitBreakerStatus as C, isHealthStatus as v } from "./System/types.js";
+import { calculateAggregateTpdexScore as k, calculateTpdexScore as y, getTpdexRating as F, getTpdexTextClassName as R, tpdexScale as B } from "./Tpdex.js";
+import { countActiveFilters as H, hasActiveFilters as M } from "./Filters/active.js";
+import { findHeader as U } from "./Http/headers.js";
+import { localToday as G, parseLocalDay as I } from "./Filters/dates.js";
+import { readArray as L, readDates as W, readRange as _, readSingle as b } from "./Filters/read.js";
+import { splitRequestTarget as w } from "./Http/requestTarget.js";
+export {
+  c as UNKNOWN_API,
+  i as apiOf,
+  u as cacheStatusOrder,
+  k as calculateAggregateTpdexScore,
+  y as calculateTpdexScore,
+  x as canonicalStatusToken,
+  h as circuitBreakerStatusMap,
+  H as countActiveFilters,
+  s as deriveTransactionFacets,
+  d as effectiveCacheStatus,
+  a as filterTransactions,
+  U as findHeader,
+  F as getTpdexRating,
+  R as getTpdexTextClassName,
+  M as hasActiveFilters,
+  A as healthStatusMap,
+  C as isCircuitBreakerStatus,
+  v as isHealthStatus,
+  p as isUnder,
+  G as localToday,
+  I as parseLocalDay,
+  n as parseStatusSelection,
+  L as readArray,
+  W as readDates,
+  _ as readRange,
+  b as readSingle,
+  f as segmentsOf,
+  w as splitRequestTarget,
+  m as statusClassOf,
+  S as statusClassOrder,
+  g as statusGroupsOf,
+  T as tagPairsOf,
+  B as tpdexScale
+};

package/dist/Pages/Alerts/AlertsPage.d.ts

@@ -0,0 +1,18 @@
+import type { Transaction } from "../../Models/Transactions/types.js";
+import type { ComponentProps } from "react";
+export interface Alert {
+    id: string;
+    name: string;
+    description: string;
+    status: "firing" | "expired" | "archived" | "ignored";
+    severity: "critical" | "warning" | "info";
+    lastTriggered: string;
+    affectedEndpoint?: string;
+    transactionCount?: number;
+    /** Transactions related to this alert, shown in the drawer when the alert is selected. */
+    transactions?: Transaction[];
+}
+export interface AlertsPageProps extends ComponentProps<"div"> {
+    alerts: Alert[];
+}
+export declare function AlertsPage({ alerts, className, ...props }: AlertsPageProps): import("react/jsx-runtime").JSX.Element;

package/dist/Pages/Alerts/AlertsPage.js

@@ -0,0 +1,104 @@
+import { jsxs as i, jsx as n } from "react/jsx-runtime";
+import { InformationCircleIcon as p, ExclamationTriangleIcon as g, XCircleIcon as u, ClockIcon as v } from "@heroicons/react/24/outline";
+import { useState as y } from "react";
+import { twMerge as c } from "tailwind-merge";
+import { Section as N } from "../../Components/Typography/Section.js";
+import { H2 as w } from "../../Components/Typography/Titles.js";
+import { P as C } from "../../Components/Typography/Paragraphs.js";
+import { Badge as o } from "../../Components/Badges/Badge.js";
+import { Drawer as b } from "../../Components/Dialog/Drawer.js";
+import { useClientSideTransactions as k } from "../Transactions/List/useClientSideTransactions.js";
+import { TransactionsListPage as A } from "../Transactions/List/TransactionsListPage.js";
+const l = [];
+function T({ transactions: s }) {
+  const r = k(s);
+  return /* @__PURE__ */ n(A, { ...r, className: "h-full" });
+}
+const I = {
+  firing: "danger",
+  expired: "warning",
+  archived: "blue",
+  ignored: "default"
+}, S = {
+  critical: "danger",
+  warning: "warning",
+  info: "blue"
+}, E = {
+  critical: u,
+  warning: g,
+  info: p
+};
+function X({ alerts: s, className: r, ...d }) {
+  const [t, a] = y(null), m = t !== null, f = (e) => {
+    a(e);
+  }, h = () => {
+    a(null);
+  };
+  return /* @__PURE__ */ i("div", { className: c("space-y-6", r), ...d, children: [
+    /* @__PURE__ */ i(N, { children: [
+      /* @__PURE__ */ n(w, { children: "Active & Recent Alerts" }),
+      /* @__PURE__ */ n(C, { className: "text-gray-500 mt-2", children: "Monitor and manage API observability alerts. Click on any alert to view related transactions." })
+    ] }),
+    /* @__PURE__ */ n("div", { className: "bg-white rounded-lg shadow", children: /* @__PURE__ */ n("div", { className: "divide-y divide-gray-200", children: s.map((e) => {
+      const x = E[e.severity];
+      return /* @__PURE__ */ n(
+        "div",
+        {
+          onClick: () => f(e),
+          className: "px-4 py-2.5 hover:bg-gray-50 cursor-pointer transition-colors",
+          children: /* @__PURE__ */ i("div", { className: "flex items-center space-x-3", children: [
+            /* @__PURE__ */ n("div", { className: "flex-shrink-0", children: /* @__PURE__ */ n(
+              x,
+              {
+                className: c(
+                  "h-4 w-4",
+                  e.severity === "critical" && "text-danger-500",
+                  e.severity === "warning" && "text-warning-500",
+                  e.severity === "info" && "text-blue-500"
+                )
+              }
+            ) }),
+            /* @__PURE__ */ i("div", { className: "flex-1 min-w-0", children: [
+              /* @__PURE__ */ i("div", { className: "flex items-center justify-between", children: [
+                /* @__PURE__ */ i("div", { className: "flex items-center space-x-2 min-w-0 flex-1", children: [
+                  /* @__PURE__ */ n("h3", { className: "text-sm font-medium text-gray-900 truncate", children: e.name }),
+                  /* @__PURE__ */ n(o, { color: S[e.severity], className: "flex-shrink-0 text-xs", children: e.severity }),
+                  /* @__PURE__ */ n(o, { color: I[e.status], className: "flex-shrink-0 text-xs", children: e.status })
+                ] }),
+                /* @__PURE__ */ i("div", { className: "flex items-center space-x-3 text-xs text-gray-500 flex-shrink-0", children: [
+                  /* @__PURE__ */ i("div", { className: "flex items-center space-x-1", children: [
+                    /* @__PURE__ */ n(v, { className: "h-3 w-3" }),
+                    /* @__PURE__ */ n("span", { children: e.lastTriggered })
+                  ] }),
+                  e.affectedEndpoint && /* @__PURE__ */ n("span", { className: "font-mono bg-gray-100 text-gray-700 px-1.5 py-0.5 rounded text-xs", children: e.affectedEndpoint }),
+                  e.transactionCount ? /* @__PURE__ */ i("span", { children: [
+                    /* @__PURE__ */ n("span", { className: "font-medium", children: e.transactionCount }),
+                    " tx"
+                  ] }) : null
+                ] })
+              ] }),
+              /* @__PURE__ */ n("p", { className: "text-xs text-gray-600 mt-1 line-clamp-1", children: e.description })
+            ] })
+          ] })
+        },
+        e.id
+      );
+    }) }) }),
+    /* @__PURE__ */ n(
+      b,
+      {
+        isOpen: m,
+        onClose: h,
+        title: t ? `Transactions for: ${t.name}` : "Alert Transactions",
+        description: t ? `Showing ${(t.transactions ?? l).length} transactions related to this alert from ${t.affectedEndpoint || "various endpoints"}` : "Related transaction details",
+        size: "lg",
+        position: "right",
+        backdrop: !0,
+        children: t && /* @__PURE__ */ n("div", { className: "h-full", children: /* @__PURE__ */ n(T, { transactions: t.transactions ?? l }, t.id) })
+      }
+    )
+  ] });
+}
+export {
+  X as AlertsPage
+};

package/dist/Pages/Alerts/index.d.ts

@@ -0,0 +1 @@
+export * from "./AlertsPage.js";

package/dist/Pages/Alerts/index.js

@@ -0,0 +1,4 @@
+import { AlertsPage as o } from "./AlertsPage.js";
+export {
+  o as AlertsPage
+};

package/dist/Pages/Explorer/ExplorerPage.d.ts

@@ -0,0 +1,6 @@
+import type { DetailedTransaction } from "../../Models/Transactions/types.js";
+export interface ExplorerPageProps {
+    transactions: DetailedTransaction[];
+    className?: string;
+}
+export declare function ExplorerPage({ transactions, className }: ExplorerPageProps): import("react/jsx-runtime").JSX.Element;

package/dist/Pages/Explorer/ExplorerPage.js

@@ -0,0 +1,55 @@
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { FolderIcon as x } from "@heroicons/react/24/outline";
+import { isUnder as w } from "../../Models/Transactions/endpoints.js";
+import { useState as c, useMemo as T } from "react";
+import { twMerge as g } from "tailwind-merge";
+import { useClientSideTransactions as N } from "../Transactions/List/useClientSideTransactions.js";
+import { Section as S } from "../../Components/Typography/Section.js";
+import { H2 as v } from "../../Components/Typography/Titles.js";
+import { P } from "../../Components/Typography/Paragraphs.js";
+import { TransactionsExplorerSidebar as D } from "../../Elements/Transactions/TransactionsExplorerSidebar.js";
+import { TransactionsListPage as I } from "../Transactions/List/TransactionsListPage.js";
+import { Drawer as b } from "../../Components/Dialog/Drawer.js";
+import { TransactionsDetailPage as y } from "../Transactions/Detail/TransactionsDetailPage.js";
+function z({ transactions: n, className: m }) {
+  const [t, d] = c(null), [a, o] = c(null), s = a !== null, p = T(() => t ? n.filter((r) => w(r, t)).sort((r, l) => new Date(l.timestamp).getTime() - new Date(r.timestamp).getTime()) : [], [t, n]), f = N(p), h = (r) => {
+    o(n.find((l) => l.id === r.id) ?? null);
+  }, u = () => {
+    o(null);
+  };
+  return /* @__PURE__ */ i("div", { className: g("h-full", m), children: [
+    /* @__PURE__ */ i(S, { className: "mb-6", children: [
+      /* @__PURE__ */ e(v, { children: "API Explorer" }),
+      /* @__PURE__ */ e(P, { className: "text-gray-500 mt-2", children: "Browse and explore API endpoints hierarchically. Select an API or endpoint to view related transactions." })
+    ] }),
+    /* @__PURE__ */ i("div", { className: "flex gap-4 h-[calc(100%-8rem)]", children: [
+      /* @__PURE__ */ e(
+        D,
+        {
+          className: "w-80",
+          transactions: n,
+          selected: t,
+          onSelect: d
+        }
+      ),
+      /* @__PURE__ */ e("div", { className: "flex-1 bg-white rounded-lg shadow overflow-hidden", children: t ? /* @__PURE__ */ e(
+        I,
+        {
+          ...f,
+          variant: "embedded",
+          onTransactionSelect: h,
+          selectedId: a?.id ?? null,
+          isDrawerOpen: s,
+          className: "h-full"
+        }
+      ) : /* @__PURE__ */ e("div", { className: "h-full flex items-center justify-center", children: /* @__PURE__ */ i("div", { className: "text-center", children: [
+        /* @__PURE__ */ e(x, { className: "h-12 w-12 text-gray-300 mx-auto mb-3" }),
+        /* @__PURE__ */ e("p", { className: "text-sm text-gray-500", children: "Select an API or endpoint to view transactions" })
+      ] }) }) })
+    ] }),
+    /* @__PURE__ */ e(b, { isOpen: s, onClose: u, title: "Transaction Details", children: a && /* @__PURE__ */ e(y, { transaction: a }) })
+  ] });
+}
+export {
+  z as ExplorerPage
+};

package/dist/Pages/Explorer/index.d.ts

@@ -0,0 +1 @@
+export * from "./ExplorerPage.js";

package/dist/Pages/Explorer/index.js

@@ -0,0 +1,4 @@
+import { ExplorerPage as o } from "./ExplorerPage.js";
+export {
+  o as ExplorerPage
+};

package/dist/Pages/Overview/OverviewPage.d.ts

@@ -0,0 +1,11 @@
+import { type HistorySectionProps } from "./Sections/HistorySection.js";
+import { type SummarySectionProps } from "./Sections/SummarySection.js";
+export type { SummarySectionProps, SummaryLinks, ChartDataPoint, PerformanceData, RateData, } from "./Sections/SummarySection.js";
+export type { HistorySectionProps, HistoryEndpoint } from "./Sections/HistorySection.js";
+export interface OverviewPageProps {
+    /** Summary section: data (performance, transactions and errors rates), links, link component and window label. */
+    summary: SummarySectionProps;
+    /** History section: selected time range, its change handler, and the data for that range. */
+    history: HistorySectionProps;
+}
+export declare const OverviewPage: ({ summary, history }: OverviewPageProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Pages/Overview/OverviewPage.js

@@ -0,0 +1,10 @@
+import { jsxs as i, jsx as r } from "react/jsx-runtime";
+import { HistorySection as m } from "./Sections/HistorySection.js";
+import { SummarySection as t } from "./Sections/SummarySection.js";
+const n = ({ summary: o, history: e }) => /* @__PURE__ */ i("div", { className: "space-y-8", children: [
+  /* @__PURE__ */ r(t, { ...o }),
+  /* @__PURE__ */ r(m, { ...e })
+] });
+export {
+  n as OverviewPage
+};

package/dist/Pages/Overview/Sections/Components/TransactionsHistoryView.d.ts

@@ -0,0 +1,7 @@
+import type { OverviewData } from "../../../../Models/index.js";
+export interface TransactionsHistoryViewProps {
+    data: OverviewData;
+    title?: string;
+    className?: string;
+}
+export declare const TransactionsHistoryView: ({ data, title, className }: TransactionsHistoryViewProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Pages/Overview/Sections/Components/TransactionsHistoryView.js

@@ -0,0 +1,32 @@
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { H3 as o } from "../../../../Components/Typography/Titles.js";
+import { TpdexBadge as l } from "../../../../Elements/Tpdex/TpdexBadge.js";
+import { TransactionsChart as m } from "../../../../Components/Charts/TransactionsChart.js";
+const p = ({ data: r, title: n, className: s }) => {
+  const i = Math.trunc(r.meanDuration) / 1e3, a = Math.trunc(r.meanTpdex), c = r.errors.rate.toLocaleString(void 0, { style: "percent", minimumFractionDigits: 1 });
+  return /* @__PURE__ */ e("div", { className: s, children: /* @__PURE__ */ t("div", { className: "flex", children: [
+    /* @__PURE__ */ t("div", { className: "flex flex-col max-w-60", children: [
+      /* @__PURE__ */ e(o, { children: n }),
+      /* @__PURE__ */ t("div", { className: "flex flex-col items-center gap-2 self-center", children: [
+        /* @__PURE__ */ e(l, { score: a }),
+        /* @__PURE__ */ t("div", { className: "text-xs font-normal text-center text-gray-600", children: [
+          r.timeRange,
+          " average"
+        ] })
+      ] }),
+      /* @__PURE__ */ t("div", { className: "grid grid-cols-2 text-xs text-left align-text-bottom items-center self-center ml-10 mt-10", children: [
+        /* @__PURE__ */ e("span", { className: "font-bold", children: "Mean duration:" }),
+        /* @__PURE__ */ t("span", { children: [
+          i,
+          " s"
+        ] }),
+        /* @__PURE__ */ e("span", { className: "font-bold", children: "Errors:" }),
+        /* @__PURE__ */ e("span", { children: c })
+      ] })
+    ] }),
+    /* @__PURE__ */ e("div", { className: "grow h-full", children: /* @__PURE__ */ e(m, { data: r.transactions, timeRange: r.timeRange }) })
+  ] }) });
+};
+export {
+  p as TransactionsHistoryView
+};

package/dist/Pages/Overview/Sections/Components/index.d.ts

@@ -0,0 +1 @@
+export { TransactionsHistoryView } from "./TransactionsHistoryView.js";

package/dist/Pages/Overview/Sections/Components/index.js

@@ -0,0 +1,4 @@
+import { TransactionsHistoryView as i } from "./TransactionsHistoryView.js";
+export {
+  i as TransactionsHistoryView
+};

package/dist/Pages/Overview/Sections/HistorySection.d.ts

@@ -0,0 +1,18 @@
+import type { OverviewData } from "../../../Models/index.js";
+/** One endpoint's history block. */
+export interface HistoryEndpoint {
+    name: string;
+    data: OverviewData;
+}
+/** Props for the HistorySection component. */
+export interface HistorySectionProps {
+    /** Currently selected time range (one of the selector keys, e.g. "7d"). */
+    timeRange: string;
+    /** Called when the user picks a different time range; the consumer loads and passes new data. */
+    onTimeRangeChange: (timeRange: string) => void;
+    /** Aggregated transactions history for the selected range. */
+    transactions: OverviewData;
+    /** Per-endpoint history for the selected range. */
+    endpoints: HistoryEndpoint[];
+}
+export declare const HistorySection: ({ timeRange, onTimeRangeChange, transactions, endpoints }: HistorySectionProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Pages/Overview/Sections/HistorySection.js

@@ -0,0 +1,21 @@
+import { jsxs as e, Fragment as l, jsx as t } from "react/jsx-runtime";
+import { ButtonGroup as c } from "../../../Components/Buttons/ButtonGroup.js";
+import { H2 as d } from "../../../Components/Typography/Titles.js";
+import { Card as i } from "../../../Components/Cards/Card.js";
+import { TransactionsHistoryView as o } from "./Components/TransactionsHistoryView.js";
+const h = [
+  { key: "1h", title: "1 hour" },
+  { key: "24h", title: "24 hours" },
+  { key: "7d", title: "7 days" },
+  { key: "1m", title: "1 month" }
+], k = ({ timeRange: s, onTimeRangeChange: a, transactions: m, endpoints: n }) => /* @__PURE__ */ e(l, { children: [
+  /* @__PURE__ */ e("div", { className: "flex justify-end my-2", children: [
+    /* @__PURE__ */ t(d, { className: "grow", children: "History" }),
+    /* @__PURE__ */ t(c, { buttonProps: h, current: s, setCurrent: a })
+  ] }),
+  /* @__PURE__ */ t(i, { className: "mb-4", children: /* @__PURE__ */ t(o, { title: "Transactions", data: m }) }),
+  /* @__PURE__ */ t("div", { className: "grid grid-cols-2 gap-4", children: n.map((r) => /* @__PURE__ */ t(i, { children: /* @__PURE__ */ t(o, { title: r.name, data: r.data }) }, r.name)) })
+] });
+export {
+  k as HistorySection
+};

package/dist/Pages/Overview/Sections/SummarySection.d.ts

@@ -0,0 +1,44 @@
+import type { LinkComponentType } from "../../../Components/NavBar/index.js";
+/** Data point for time-series charts. */
+export interface ChartDataPoint {
+    datetime: string;
+    value: number;
+}
+/** Performance (TPDEX) summary data. */
+export interface PerformanceData {
+    /** Mean TPDEX score (0-100). */
+    mean: number;
+    /** Hourly data points for the chart. */
+    data: ChartDataPoint[];
+}
+/** Rate-based metric data (transactions or errors). */
+export interface RateData {
+    /** Rate value (count per period). */
+    rate: number;
+    /** Period label (e.g., "h" for hourly). */
+    period: string;
+    /** Hourly data points for the chart. */
+    data: ChartDataPoint[];
+}
+/** Props for the SummarySection component. */
+export interface SummarySectionProps {
+    /** Performance/TPDEX data. */
+    performance: PerformanceData;
+    /** Transaction rate data. */
+    transactions: RateData;
+    /** Error rate data. */
+    errors: RateData;
+    /** Target of each pane's "details" link. A pane without a target renders no link. */
+    links?: SummaryLinks;
+    /** Component rendering the links, to go through the consumer's router. Defaults to a plain `<a>`. */
+    linkComponent?: LinkComponentType;
+    /** Period the data covers (e.g. "24h"), shown in the pane titles and the average labels. Shown nowhere when absent. */
+    windowLabel?: string;
+}
+/** Targets of the "details" links of the summary panes. */
+export interface SummaryLinks {
+    performance?: string;
+    transactions?: string;
+    errors?: string;
+}
+export declare const SummarySection: ({ performance, transactions, errors, links, linkComponent, windowLabel, }: SummarySectionProps) => import("react/jsx-runtime").JSX.Element;