@burdenoff/microfe-adaptercloud 2026.825.4 → 2026.829.1

package/dist/adaptercloud/pages/costs/CostsPage.js

@@ -6,26 +6,30 @@ import { DataState as i } from "../../components/DataState.js";
 import { BarChart as a } from "../../components/viz/BarChart.js";
 import { Sparkline as o } from "../../components/viz/Sparkline.js";
 import "../../components/viz/index.js";
-import { useCostRecords as s, useCostSummary as c } from "../../hooks/useAdapterCloudApi.js";
-import { formatDate as l } from "../../utils/formatters.js";
-import { useCallback as u, useMemo as d, useState as f } from "react";
-import { useI18n as p } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
-import { DollarSign as m, Receipt as h, Search as g, X as _ } from "lucide-react";
-import { Fragment as v, jsx as y, jsxs as b } from "react/jsx-runtime";
-import { EmphasisPanel as x, GlassCard as S, ResponsiveTable as C } from "@burdenoff/fe-libs/ui";
+import { useConnections as s, useCostRecords as c, useCostSummary as l } from "../../hooks/useAdapterCloudApi.js";
+import { formatDate as u } from "../../utils/formatters.js";
+import { useCallback as d, useMemo as f, useState as p } from "react";
+import { useI18n as m } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { DollarSign as h, Receipt as g, Search as _, X as v } from "lucide-react";
+import { Fragment as y, jsx as b, jsxs as x } from "react/jsx-runtime";
+import { EmphasisPanel as S, GlassCard as C, ResponsiveTable as w } from "@burdenoff/fe-libs/ui";
 //#region src/adaptercloud/pages/costs/CostsPage.tsx
-function w() {
-	let { navigateTo: w } = e(), { t: T } = p(), E = u((e, t) => {
-		let n = T(e);
+var T = 100;
+function E() {
+	let { navigateTo: E } = e(), { t: D } = m(), O = d((e, t) => {
+		let n = D(e);
 		return n === e ? t : n;
-	}, [T]), [D, O] = f(""), [k, A] = f(""), j = c(), M = s({ service: k || void 0 }), N = j.data?.currency ?? "USD", P = d(() => [...j.data?.lines ?? []].sort((e, t) => t.total - e.total), [j.data]), F = d(() => P.map((e) => ({
+	}, [D]), [k, A] = p(""), [j, M] = p(""), [N, P] = p(""), F = s({ pagination: { limit: T } }).data?.items ?? [], I = l(N || void 0), L = c({
+		connectionId: N || void 0,
+		service: j || void 0
+	}), R = I.data?.currency ?? "USD", z = f(() => [...I.data?.lines ?? []].sort((e, t) => t.total - e.total), [I.data]), B = f(() => z.map((e) => ({
 		key: e.service,
 		label: e.service,
 		value: e.total,
-		display: r(e.total, N)
-	})), [P, N]), I = d(() => {
+		display: r(e.total, R)
+	})), [z, R]), V = f(() => {
 		let e = /* @__PURE__ */ new Map();
-		for (let t of M.data ?? []) {
+		for (let t of L.data ?? []) {
 			let n = new Date(t.periodStart);
 			if (Number.isNaN(n.getTime())) continue;
 			let r = `${n.getUTCFullYear()}-${String(n.getUTCMonth() + 1).padStart(2, "0")}`;
@@ -36,43 +40,43 @@ function w() {
 			points: t,
 			deltaPct: r > 0 ? Math.round((n - r) / r * 100) : null
 		};
-	}, [M.data]), L = u((e) => {
-		e.preventDefault(), A(D.trim());
-	}, [D]), R = u(() => {
-		O(""), A("");
-	}, []), z = [
+	}, [L.data]), H = d((e) => {
+		e.preventDefault(), M(k.trim());
+	}, [k]), U = d(() => {
+		A(""), M("");
+	}, []), W = [
 		{
 			key: "service",
-			header: E("adaptercloud.costs.service", "Service"),
+			header: O("adaptercloud.costs.service", "Service"),
 			priority: "primary",
-			cell: (e) => /* @__PURE__ */ y("span", {
+			cell: (e) => /* @__PURE__ */ b("span", {
 				className: "font-medium text-text-primary",
 				children: e.service
 			})
 		},
 		{
 			key: "amount",
-			header: E("adaptercloud.costs.amount", "Amount"),
+			header: O("adaptercloud.costs.amount", "Amount"),
 			priority: "primary",
-			cell: (e) => /* @__PURE__ */ y("span", {
+			cell: (e) => /* @__PURE__ */ b("span", {
 				className: "tabular-nums text-text-primary",
 				children: r(e.amount, e.currency)
 			})
 		},
 		{
 			key: "period",
-			header: E("adaptercloud.costs.period", "Period"),
+			header: O("adaptercloud.costs.period", "Period"),
 			priority: "secondary",
-			cell: (e) => /* @__PURE__ */ b("span", {
+			cell: (e) => /* @__PURE__ */ x("span", {
 				className: "text-sm text-text-secondary",
 				children: [
-					l(e.periodStart, {
+					u(e.periodStart, {
 						hour: void 0,
 						minute: void 0
 					}),
 					" –",
 					" ",
-					l(e.periodEnd, {
+					u(e.periodEnd, {
 						hour: void 0,
 						minute: void 0
 					})
@@ -81,163 +85,186 @@ function w() {
 		},
 		{
 			key: "resource",
-			header: E("adaptercloud.costs.resource", "Resource"),
+			header: O("adaptercloud.costs.resource", "Resource"),
 			priority: "secondary",
-			cell: (e) => e.resource?.name ? /* @__PURE__ */ y("button", {
+			cell: (e) => e.resource?.name ? /* @__PURE__ */ b("button", {
 				type: "button",
-				onClick: () => e.resourceId && w(`/resources/${e.resourceId}`),
+				onClick: () => e.resourceId && E(`/resources/${e.resourceId}`),
 				className: "max-w-[12rem] truncate text-left text-sm text-accent-blue hover:underline",
 				children: e.resource.name
-			}) : e.resourceId ? /* @__PURE__ */ b("span", {
+			}) : e.resourceId ? /* @__PURE__ */ x("span", {
 				className: "font-mono text-xs text-text-secondary",
 				children: [e.resourceId.slice(0, 10), "…"]
-			}) : /* @__PURE__ */ y("span", {
+			}) : /* @__PURE__ */ b("span", {
 				className: "text-text-tertiary",
 				children: "—"
 			})
 		},
 		{
 			key: "connection",
-			header: E("adaptercloud.costs.connection", "Connection"),
+			header: O("adaptercloud.costs.connection", "Connection"),
 			priority: "hidden-on-mobile",
-			cell: (e) => e.connection?.name ? /* @__PURE__ */ y("span", {
+			cell: (e) => e.connection?.name ? /* @__PURE__ */ b("span", {
 				className: "max-w-[12rem] truncate text-sm text-text-primary",
 				children: e.connection.name
-			}) : /* @__PURE__ */ y("span", {
+			}) : /* @__PURE__ */ b("span", {
 				className: "text-text-tertiary",
 				children: "—"
 			})
 		}
 	];
-	return /* @__PURE__ */ b(t, {
-		title: E("adaptercloud.costs.title", "FinOps"),
-		description: E("adaptercloud.costs.subtitle", "Spend attributed to the same resources you operate — cost and topology share one model."),
-		children: [/* @__PURE__ */ b(i, {
-			isLoading: j.isLoading,
-			isError: j.isError,
-			error: j.error,
-			onRetry: () => void j.refetch(),
-			children: [/* @__PURE__ */ b(x, {
-				className: "mb-8",
-				children: [/* @__PURE__ */ y("div", {
-					className: "mb-4 flex items-center justify-between",
-					children: /* @__PURE__ */ y("h2", {
-						className: "text-lg font-semibold text-text-primary",
-						children: E("adaptercloud.costs.summary", "Cost Summary")
-					})
-				}), /* @__PURE__ */ b("div", {
-					className: "grid grid-cols-2 gap-4 lg:grid-cols-4",
-					children: [/* @__PURE__ */ y(n, {
-						featured: !0,
-						icon: /* @__PURE__ */ y(m, { className: "h-5 w-5" }),
-						value: j.data ? r(j.data.total, N) : "—",
-						label: E("adaptercloud.costs.totalSpend", "Total Spend")
-					}), P.slice(0, 3).map((e) => /* @__PURE__ */ y(n, {
-						icon: /* @__PURE__ */ y(h, { className: "h-5 w-5" }),
-						value: r(e.total, N),
-						label: e.service
-					}, e.service))]
+	return /* @__PURE__ */ x(t, {
+		title: O("adaptercloud.costs.title", "FinOps"),
+		description: O("adaptercloud.costs.subtitle", "Spend attributed to the same resources you operate — cost and topology share one model."),
+		children: [
+			/* @__PURE__ */ x("div", {
+				className: "mb-6 flex flex-wrap items-center gap-3",
+				children: [/* @__PURE__ */ b("label", {
+					htmlFor: "ada-cost-connection",
+					className: "text-sm text-text-secondary",
+					children: O("adaptercloud.costs.connection", "Connection")
+				}), /* @__PURE__ */ x("select", {
+					id: "ada-cost-connection",
+					value: N,
+					onChange: (e) => P(e.target.value),
+					className: "rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]",
+					children: [/* @__PURE__ */ b("option", {
+						value: "",
+						children: O("adaptercloud.costs.allConnections", "All connections")
+					}), F.map((e) => /* @__PURE__ */ b("option", {
+						value: e.id,
+						children: e.name
+					}, e.id))]
 				})]
-			}), P.length > 0 && /* @__PURE__ */ b("div", {
-				className: "mb-8 grid grid-cols-1 gap-6 lg:grid-cols-3",
-				children: [/* @__PURE__ */ b("section", {
-					className: "lg:col-span-2",
-					children: [/* @__PURE__ */ y("h2", {
-						className: "mb-4 text-lg font-semibold text-text-primary",
-						children: E("adaptercloud.costs.byService", "Spend by Service")
-					}), /* @__PURE__ */ y(S, {
-						className: "p-5",
-						children: /* @__PURE__ */ y(a, {
-							data: F,
-							labelWidthClassName: "w-24 sm:w-32"
+			}),
+			/* @__PURE__ */ x(i, {
+				isLoading: I.isLoading,
+				isError: I.isError,
+				error: I.error,
+				onRetry: () => void I.refetch(),
+				children: [/* @__PURE__ */ x(S, {
+					className: "mb-8",
+					children: [/* @__PURE__ */ b("div", {
+						className: "mb-4 flex items-center justify-between",
+						children: /* @__PURE__ */ b("h2", {
+							className: "text-lg font-semibold text-text-primary",
+							children: O("adaptercloud.costs.summary", "Cost Summary")
 						})
+					}), /* @__PURE__ */ x("div", {
+						className: "grid grid-cols-2 gap-4 lg:grid-cols-4",
+						children: [/* @__PURE__ */ b(n, {
+							featured: !0,
+							icon: /* @__PURE__ */ b(h, { className: "h-5 w-5" }),
+							value: I.data ? r(I.data.total, R) : "—",
+							label: O("adaptercloud.costs.totalSpend", "Total Spend")
+						}), z.slice(0, 3).map((e) => /* @__PURE__ */ b(n, {
+							icon: /* @__PURE__ */ b(g, { className: "h-5 w-5" }),
+							value: r(e.total, R),
+							label: e.service
+						}, e.service))]
 					})]
-				}), /* @__PURE__ */ b("section", { children: [/* @__PURE__ */ y("h2", {
-					className: "mb-4 text-lg font-semibold text-text-primary",
-					children: E("adaptercloud.costs.trend", "Monthly Trend")
-				}), /* @__PURE__ */ y(S, {
-					className: "flex h-[calc(100%-2.75rem)] flex-col justify-between p-5",
-					children: I.points.length >= 2 ? /* @__PURE__ */ b(v, { children: [/* @__PURE__ */ b("div", {
-						className: "flex items-baseline gap-2",
-						children: [/* @__PURE__ */ y("span", {
-							className: "text-2xl font-bold tabular-nums text-text-primary",
-							children: r(I.points[I.points.length - 1] ?? 0, N)
-						}), I.deltaPct !== null && /* @__PURE__ */ b("span", {
-							className: `text-xs font-semibold tabular-nums ${I.deltaPct > 0 ? "text-status-error-text" : "text-status-success-text"}`,
-							children: [
-								I.deltaPct > 0 ? "▲" : "▼",
-								" ",
-								Math.abs(I.deltaPct),
-								"%",
-								" ",
-								E("adaptercloud.costs.vsPrev", "vs prev")
-							]
+				}), z.length > 0 && /* @__PURE__ */ x("div", {
+					className: "mb-8 grid grid-cols-1 gap-6 lg:grid-cols-3",
+					children: [/* @__PURE__ */ x("section", {
+						className: "lg:col-span-2",
+						children: [/* @__PURE__ */ b("h2", {
+							className: "mb-4 text-lg font-semibold text-text-primary",
+							children: O("adaptercloud.costs.byService", "Spend by Service")
+						}), /* @__PURE__ */ b(C, {
+							className: "p-5",
+							children: /* @__PURE__ */ b(a, {
+								data: B,
+								labelWidthClassName: "w-24 sm:w-32"
+							})
 						})]
-					}), /* @__PURE__ */ y(o, {
-						points: I.points,
-						className: "mt-4 h-16 w-full text-accent-blue"
-					})] }) : /* @__PURE__ */ y("p", {
-						className: "py-6 text-center text-sm text-text-secondary",
-						children: E("adaptercloud.costs.trendEmpty", "Ingest at least two months of cost to see a trend.")
-					})
-				})] })]
-			})]
-		}), /* @__PURE__ */ b("section", { children: [/* @__PURE__ */ b("div", {
-			className: "mb-4 flex flex-wrap items-center justify-between gap-3",
-			children: [/* @__PURE__ */ y("h2", {
-				className: "text-lg font-semibold text-text-primary",
-				children: E("adaptercloud.costs.records", "Cost Records")
-			}), /* @__PURE__ */ b("form", {
-				onSubmit: L,
-				role: "search",
-				className: "flex w-full items-center gap-2 sm:w-auto",
-				children: [/* @__PURE__ */ b("div", {
-					className: "relative w-full sm:w-56",
-					children: [/* @__PURE__ */ y("input", {
-						type: "text",
-						value: D,
-						onChange: (e) => O(e.target.value),
-						"aria-label": E("adaptercloud.costs.filterService", "Filter by service"),
-						placeholder: E("adaptercloud.costs.filterServicePlaceholder", "Filter by service…"),
-						className: "w-full rounded-lg border border-border-subtle bg-bg-surface py-2 pl-3 pr-9 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]"
-					}), k && /* @__PURE__ */ y("button", {
-						type: "button",
-						onClick: R,
-						"aria-label": E("adaptercloud.costs.clearServiceFilter", "Clear service filter"),
-						className: "absolute right-2 top-1/2 -translate-y-1/2 rounded p-0.5 text-text-secondary transition-colors hover:text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]",
-						children: /* @__PURE__ */ y(_, { className: "h-4 w-4" })
-					})]
-				}), /* @__PURE__ */ y("button", {
-					type: "submit",
-					"aria-label": E("adaptercloud.costs.applyServiceFilter", "Apply service filter"),
-					className: "inline-flex shrink-0 items-center justify-center rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 text-text-primary transition-colors hover:bg-accent focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]",
-					children: /* @__PURE__ */ y(g, { className: "h-4 w-4" })
+					}), /* @__PURE__ */ x("section", { children: [/* @__PURE__ */ b("h2", {
+						className: "mb-4 text-lg font-semibold text-text-primary",
+						children: O("adaptercloud.costs.trend", "Monthly Trend")
+					}), /* @__PURE__ */ b(C, {
+						className: "flex h-[calc(100%-2.75rem)] flex-col justify-between p-5",
+						children: V.points.length >= 2 ? /* @__PURE__ */ x(y, { children: [/* @__PURE__ */ x("div", {
+							className: "flex items-baseline gap-2",
+							children: [/* @__PURE__ */ b("span", {
+								className: "text-2xl font-bold tabular-nums text-text-primary",
+								children: r(V.points[V.points.length - 1] ?? 0, R)
+							}), V.deltaPct !== null && /* @__PURE__ */ x("span", {
+								className: `text-xs font-semibold tabular-nums ${V.deltaPct > 0 ? "text-status-error-text" : "text-status-success-text"}`,
+								children: [
+									V.deltaPct > 0 ? "▲" : "▼",
+									" ",
+									Math.abs(V.deltaPct),
+									"%",
+									" ",
+									O("adaptercloud.costs.vsPrev", "vs prev")
+								]
+							})]
+						}), /* @__PURE__ */ b(o, {
+							points: V.points,
+							className: "mt-4 h-16 w-full text-accent-blue"
+						})] }) : /* @__PURE__ */ b("p", {
+							className: "py-6 text-center text-sm text-text-secondary",
+							children: O("adaptercloud.costs.trendEmpty", "Ingest at least two months of cost to see a trend.")
+						})
+					})] })]
 				})]
-			})]
-		}), /* @__PURE__ */ y(i, {
-			isLoading: M.isLoading,
-			isError: M.isError,
-			isEmpty: (M.data ?? []).length === 0,
-			error: M.error,
-			onRetry: () => void M.refetch(),
-			emptyTitle: E("adaptercloud.costs.emptyTitle", "No cost records"),
-			emptyDescription: E("adaptercloud.costs.emptyDescription", "Run a cost-ingest sync against a connection to populate the ledger."),
-			emptyIcon: /* @__PURE__ */ y(h, { className: "h-10 w-10" }),
-			emptyAction: /* @__PURE__ */ y("button", {
-				type: "button",
-				onClick: () => w("/connections"),
-				className: "rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text transition-colors hover:opacity-90",
-				children: E("adaptercloud.costs.goToConnections", "Go to connections")
 			}),
-			children: /* @__PURE__ */ y(C, {
-				data: M.data ?? [],
-				columns: z,
-				rowKey: (e) => e.id
-			})
-		})] })]
+			/* @__PURE__ */ x("section", { children: [/* @__PURE__ */ x("div", {
+				className: "mb-4 flex flex-wrap items-center justify-between gap-3",
+				children: [/* @__PURE__ */ b("h2", {
+					className: "text-lg font-semibold text-text-primary",
+					children: O("adaptercloud.costs.records", "Cost Records")
+				}), /* @__PURE__ */ x("form", {
+					onSubmit: H,
+					role: "search",
+					className: "flex w-full items-center gap-2 sm:w-auto",
+					children: [/* @__PURE__ */ x("div", {
+						className: "relative w-full sm:w-56",
+						children: [/* @__PURE__ */ b("input", {
+							type: "text",
+							value: k,
+							onChange: (e) => A(e.target.value),
+							"aria-label": O("adaptercloud.costs.filterService", "Filter by service"),
+							placeholder: O("adaptercloud.costs.filterServicePlaceholder", "Filter by service…"),
+							className: "w-full rounded-lg border border-border-subtle bg-bg-surface py-2 pl-3 pr-9 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]"
+						}), j && /* @__PURE__ */ b("button", {
+							type: "button",
+							onClick: U,
+							"aria-label": O("adaptercloud.costs.clearServiceFilter", "Clear service filter"),
+							className: "absolute right-2 top-1/2 -translate-y-1/2 rounded p-0.5 text-text-secondary transition-colors hover:text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]",
+							children: /* @__PURE__ */ b(v, { className: "h-4 w-4" })
+						})]
+					}), /* @__PURE__ */ b("button", {
+						type: "submit",
+						"aria-label": O("adaptercloud.costs.applyServiceFilter", "Apply service filter"),
+						className: "inline-flex shrink-0 items-center justify-center rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 text-text-primary transition-colors hover:bg-accent focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]",
+						children: /* @__PURE__ */ b(_, { className: "h-4 w-4" })
+					})]
+				})]
+			}), /* @__PURE__ */ b(i, {
+				isLoading: L.isLoading,
+				isError: L.isError,
+				isEmpty: (L.data ?? []).length === 0,
+				error: L.error,
+				onRetry: () => void L.refetch(),
+				emptyTitle: O("adaptercloud.costs.emptyTitle", "No cost records"),
+				emptyDescription: O("adaptercloud.costs.emptyDescription", "Run a cost-ingest sync against a connection to populate the ledger."),
+				emptyIcon: /* @__PURE__ */ b(g, { className: "h-10 w-10" }),
+				emptyAction: /* @__PURE__ */ b("button", {
+					type: "button",
+					onClick: () => E("/connections"),
+					className: "rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text transition-colors hover:opacity-90",
+					children: O("adaptercloud.costs.goToConnections", "Go to connections")
+				}),
+				children: /* @__PURE__ */ b(w, {
+					data: L.data ?? [],
+					columns: W,
+					rowKey: (e) => e.id
+				})
+			})] })
+		]
 	});
 }
 //#endregion
-export { w as CostsPage };
+export { E as CostsPage };
 
 //# sourceMappingURL=CostsPage.js.map

package/dist/adaptercloud/pages/costs/CostsPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"CostsPage.js","names":[],"sources":["../../../../src/adaptercloud/pages/costs/CostsPage.tsx"],"sourcesContent":["/**\n * Costs (FinOps) Page\n * @module adaptercloud/pages/costs\n *\n * Workspace FinOps: the cost summary by service (`adaCostSummary`) plus the raw\n * cost-record ledger (`adaListCostRecords`), optionally filtered by service.\n */\n\nimport { useState, useCallback, useMemo } from 'react';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { DollarSign, Search, Receipt, X } from 'lucide-react';\nimport {\n  EmphasisPanel,\n  GlassCard,\n  ResponsiveTable,\n  type ResponsiveTableColumn,\n} from '@burdenoff/fe-libs/ui';\nimport { PageLayout } from '../../components/PageLayout';\nimport { MetricsCard } from '../../components/MetricsCard';\nimport { DataState } from '../../components/DataState';\nimport { BarChart, Sparkline } from '../../components/viz';\nimport { useAdapterCloud } from '../../context/AdapterCloudContext';\nimport { useCostSummary, useCostRecords } from '../../hooks/useAdapterCloudApi';\nimport { formatMoney } from '../../utils/domain';\nimport { formatDate } from '../../utils/formatters';\nimport type { AdaCostRecord } from '../../types';\n\nexport function CostsPage() {\n  const { navigateTo } = useAdapterCloud();\n  const { t: translate } = useI18n();\n  const t = useCallback(\n    (key: string, fallback: string): string => {\n      const value = translate(key);\n      return value === key ? fallback : value;\n    },\n    [translate]\n  );\n\n  const [serviceInput, setServiceInput] = useState('');\n  const [appliedService, setAppliedService] = useState('');\n\n  const summary = useCostSummary();\n  const records = useCostRecords({ service: appliedService || undefined });\n\n  const currency = summary.data?.currency ?? 'USD';\n\n  const sortedLines = useMemo(\n    () => [...(summary.data?.lines ?? [])].sort((a, b) => b.total - a.total),\n    [summary.data]\n  );\n\n  // Cost-by-service bars for the BarChart (service · magnitude · $).\n  const serviceBars = useMemo(\n    () =>\n      sortedLines.map((line) => ({\n        key: line.service,\n        label: line.service,\n        value: line.total,\n        display: formatMoney(line.total, currency),\n      })),\n    [sortedLines, currency]\n  );\n\n  // Monthly cost trend, derived from the raw ledger (periodStart → YYYY-MM buckets).\n  const trend = useMemo(() => {\n    const buckets = new Map<string, number>();\n    for (const r of records.data ?? []) {\n      const d = new Date(r.periodStart);\n      if (Number.isNaN(d.getTime())) continue;\n      const key = `${d.getUTCFullYear()}-${String(d.getUTCMonth() + 1).padStart(2, '0')}`;\n      buckets.set(key, (buckets.get(key) ?? 0) + r.amount);\n    }\n    const series = [...buckets.entries()].sort(([a], [b]) => a.localeCompare(b));\n    const points = series.map(([, v]) => v);\n    const last = points[points.length - 1] ?? 0;\n    const prev = points[points.length - 2] ?? 0;\n    const deltaPct = prev > 0 ? Math.round(((last - prev) / prev) * 100) : null;\n    return { points, deltaPct };\n  }, [records.data]);\n\n  const onSearch = useCallback(\n    (e: React.FormEvent) => {\n      e.preventDefault();\n      setAppliedService(serviceInput.trim());\n    },\n    [serviceInput]\n  );\n\n  const clearService = useCallback(() => {\n    setServiceInput('');\n    setAppliedService('');\n  }, []);\n\n  const recordColumns: ResponsiveTableColumn<AdaCostRecord>[] = [\n    {\n      key: 'service',\n      header: t('adaptercloud.costs.service', 'Service'),\n      priority: 'primary',\n      cell: (r) => <span className=\"font-medium text-text-primary\">{r.service}</span>,\n    },\n    {\n      key: 'amount',\n      header: t('adaptercloud.costs.amount', 'Amount'),\n      priority: 'primary',\n      cell: (r) => (\n        <span className=\"tabular-nums text-text-primary\">{formatMoney(r.amount, r.currency)}</span>\n      ),\n    },\n    {\n      key: 'period',\n      header: t('adaptercloud.costs.period', 'Period'),\n      priority: 'secondary',\n      cell: (r) => (\n        <span className=\"text-sm text-text-secondary\">\n          {formatDate(r.periodStart, { hour: undefined, minute: undefined })} –{' '}\n          {formatDate(r.periodEnd, { hour: undefined, minute: undefined })}\n        </span>\n      ),\n    },\n    {\n      key: 'resource',\n      header: t('adaptercloud.costs.resource', 'Resource'),\n      priority: 'secondary',\n      cell: (r) =>\n        r.resource?.name ? (\n          <button\n            type=\"button\"\n            onClick={() => r.resourceId && navigateTo(`/resources/${r.resourceId}`)}\n            className=\"max-w-[12rem] truncate text-left text-sm text-accent-blue hover:underline\"\n          >\n            {r.resource.name}\n          </button>\n        ) : r.resourceId ? (\n          <span className=\"font-mono text-xs text-text-secondary\">\n            {r.resourceId.slice(0, 10)}…\n          </span>\n        ) : (\n          <span className=\"text-text-tertiary\">—</span>\n        ),\n    },\n    {\n      key: 'connection',\n      header: t('adaptercloud.costs.connection', 'Connection'),\n      priority: 'hidden-on-mobile',\n      cell: (r) =>\n        r.connection?.name ? (\n          <span className=\"max-w-[12rem] truncate text-sm text-text-primary\">\n            {r.connection.name}\n          </span>\n        ) : (\n          <span className=\"text-text-tertiary\">—</span>\n        ),\n    },\n  ];\n\n  return (\n    <PageLayout\n      title={t('adaptercloud.costs.title', 'FinOps')}\n      description={t(\n        'adaptercloud.costs.subtitle',\n        'Spend attributed to the same resources you operate — cost and topology share one model.'\n      )}\n    >\n      <DataState\n        isLoading={summary.isLoading}\n        isError={summary.isError}\n        error={summary.error}\n        onRetry={() => void summary.refetch()}\n      >\n        {/* Total + by-service */}\n        <EmphasisPanel className=\"mb-8\">\n          <div className=\"mb-4 flex items-center justify-between\">\n            <h2 className=\"text-lg font-semibold text-text-primary\">\n              {t('adaptercloud.costs.summary', 'Cost Summary')}\n            </h2>\n          </div>\n          <div className=\"grid grid-cols-2 gap-4 lg:grid-cols-4\">\n            <MetricsCard\n              featured\n              icon={<DollarSign className=\"h-5 w-5\" />}\n              value={summary.data ? formatMoney(summary.data.total, currency) : '—'}\n              label={t('adaptercloud.costs.totalSpend', 'Total Spend')}\n            />\n            {sortedLines.slice(0, 3).map((line) => (\n              <MetricsCard\n                key={line.service}\n                icon={<Receipt className=\"h-5 w-5\" />}\n                value={formatMoney(line.total, currency)}\n                label={line.service}\n              />\n            ))}\n          </div>\n        </EmphasisPanel>\n\n        {/* Full by-service breakdown + monthly trend */}\n        {sortedLines.length > 0 && (\n          <div className=\"mb-8 grid grid-cols-1 gap-6 lg:grid-cols-3\">\n            <section className=\"lg:col-span-2\">\n              <h2 className=\"mb-4 text-lg font-semibold text-text-primary\">\n                {t('adaptercloud.costs.byService', 'Spend by Service')}\n              </h2>\n              <GlassCard className=\"p-5\">\n                <BarChart data={serviceBars} labelWidthClassName=\"w-24 sm:w-32\" />\n              </GlassCard>\n            </section>\n\n            <section>\n              <h2 className=\"mb-4 text-lg font-semibold text-text-primary\">\n                {t('adaptercloud.costs.trend', 'Monthly Trend')}\n              </h2>\n              <GlassCard className=\"flex h-[calc(100%-2.75rem)] flex-col justify-between p-5\">\n                {trend.points.length >= 2 ? (\n                  <>\n                    <div className=\"flex items-baseline gap-2\">\n                      <span className=\"text-2xl font-bold tabular-nums text-text-primary\">\n                        {formatMoney(trend.points[trend.points.length - 1] ?? 0, currency)}\n                      </span>\n                      {trend.deltaPct !== null && (\n                        <span\n                          className={`text-xs font-semibold tabular-nums ${\n                            trend.deltaPct > 0\n                              ? 'text-status-error-text'\n                              : 'text-status-success-text'\n                          }`}\n                        >\n                          {trend.deltaPct > 0 ? '▲' : '▼'} {Math.abs(trend.deltaPct)}%{' '}\n                          {t('adaptercloud.costs.vsPrev', 'vs prev')}\n                        </span>\n                      )}\n                    </div>\n                    <Sparkline\n                      points={trend.points}\n                      className=\"mt-4 h-16 w-full text-accent-blue\"\n                    />\n                  </>\n                ) : (\n                  <p className=\"py-6 text-center text-sm text-text-secondary\">\n                    {t(\n                      'adaptercloud.costs.trendEmpty',\n                      'Ingest at least two months of cost to see a trend.'\n                    )}\n                  </p>\n                )}\n              </GlassCard>\n            </section>\n          </div>\n        )}\n      </DataState>\n\n      {/* Cost records ledger */}\n      <section>\n        <div className=\"mb-4 flex flex-wrap items-center justify-between gap-3\">\n          <h2 className=\"text-lg font-semibold text-text-primary\">\n            {t('adaptercloud.costs.records', 'Cost Records')}\n          </h2>\n          <form\n            onSubmit={onSearch}\n            role=\"search\"\n            className=\"flex w-full items-center gap-2 sm:w-auto\"\n          >\n            <div className=\"relative w-full sm:w-56\">\n              <input\n                type=\"text\"\n                value={serviceInput}\n                onChange={(e) => setServiceInput(e.target.value)}\n                aria-label={t('adaptercloud.costs.filterService', 'Filter by service')}\n                placeholder={t('adaptercloud.costs.filterServicePlaceholder', 'Filter by service…')}\n                className=\"w-full rounded-lg border border-border-subtle bg-bg-surface py-2 pl-3 pr-9 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]\"\n              />\n              {appliedService && (\n                <button\n                  type=\"button\"\n                  onClick={clearService}\n                  aria-label={t('adaptercloud.costs.clearServiceFilter', 'Clear service filter')}\n                  className=\"absolute right-2 top-1/2 -translate-y-1/2 rounded p-0.5 text-text-secondary transition-colors hover:text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]\"\n                >\n                  <X className=\"h-4 w-4\" />\n                </button>\n              )}\n            </div>\n            <button\n              type=\"submit\"\n              aria-label={t('adaptercloud.costs.applyServiceFilter', 'Apply service filter')}\n              className=\"inline-flex shrink-0 items-center justify-center rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 text-text-primary transition-colors hover:bg-accent focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]\"\n            >\n              <Search className=\"h-4 w-4\" />\n            </button>\n          </form>\n        </div>\n\n        <DataState\n          isLoading={records.isLoading}\n          isError={records.isError}\n          isEmpty={(records.data ?? []).length === 0}\n          error={records.error}\n          onRetry={() => void records.refetch()}\n          emptyTitle={t('adaptercloud.costs.emptyTitle', 'No cost records')}\n          emptyDescription={t(\n            'adaptercloud.costs.emptyDescription',\n            'Run a cost-ingest sync against a connection to populate the ledger.'\n          )}\n          emptyIcon={<Receipt className=\"h-10 w-10\" />}\n          emptyAction={\n            <button\n              type=\"button\"\n              onClick={() => navigateTo('/connections')}\n              className=\"rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text transition-colors hover:opacity-90\"\n            >\n              {t('adaptercloud.costs.goToConnections', 'Go to connections')}\n            </button>\n          }\n        >\n          <ResponsiveTable data={records.data ?? []} columns={recordColumns} rowKey={(r) => r.id} />\n        </DataState>\n      </section>\n    </PageLayout>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"CostsPage.js","names":[],"sources":["../../../../src/adaptercloud/pages/costs/CostsPage.tsx"],"sourcesContent":["/**\n * Costs (FinOps) Page\n * @module adaptercloud/pages/costs\n *\n * Workspace FinOps: the cost summary by service (`adaCostSummary`) plus the raw\n * cost-record ledger (`adaListCostRecords`), optionally filtered by service.\n */\n\nimport { useState, useCallback, useMemo } from 'react';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { DollarSign, Search, Receipt, X } from 'lucide-react';\nimport {\n  EmphasisPanel,\n  GlassCard,\n  ResponsiveTable,\n  type ResponsiveTableColumn,\n} from '@burdenoff/fe-libs/ui';\nimport { PageLayout } from '../../components/PageLayout';\nimport { MetricsCard } from '../../components/MetricsCard';\nimport { DataState } from '../../components/DataState';\nimport { BarChart, Sparkline } from '../../components/viz';\nimport { useAdapterCloud } from '../../context/AdapterCloudContext';\nimport { useConnections, useCostSummary, useCostRecords } from '../../hooks/useAdapterCloudApi';\nimport { formatMoney } from '../../utils/domain';\nimport { formatDate } from '../../utils/formatters';\nimport type { AdaCostRecord } from '../../types';\n\n/** How many connections the scope dropdown offers (one page of the inventory). */\nconst CONNECTION_OPTIONS_LIMIT = 100;\n\nexport function CostsPage() {\n  const { navigateTo } = useAdapterCloud();\n  const { t: translate } = useI18n();\n  const t = useCallback(\n    (key: string, fallback: string): string => {\n      const value = translate(key);\n      return value === key ? fallback : value;\n    },\n    [translate]\n  );\n\n  const [serviceInput, setServiceInput] = useState('');\n  const [appliedService, setAppliedService] = useState('');\n  const [connectionId, setConnectionId] = useState('');\n\n  // `adaCostSummary(connectionId)` and `adaListCostRecords(connectionId)` both\n  // scope server-side, so one control narrows the total, the by-service\n  // breakdown, the trend and the ledger consistently.\n  const connectionsQuery = useConnections({ pagination: { limit: CONNECTION_OPTIONS_LIMIT } });\n  const connectionOptions = connectionsQuery.data?.items ?? [];\n\n  const summary = useCostSummary(connectionId || undefined);\n  const records = useCostRecords({\n    connectionId: connectionId || undefined,\n    service: appliedService || undefined,\n  });\n\n  const currency = summary.data?.currency ?? 'USD';\n\n  const sortedLines = useMemo(\n    () => [...(summary.data?.lines ?? [])].sort((a, b) => b.total - a.total),\n    [summary.data]\n  );\n\n  // Cost-by-service bars for the BarChart (service · magnitude · $).\n  const serviceBars = useMemo(\n    () =>\n      sortedLines.map((line) => ({\n        key: line.service,\n        label: line.service,\n        value: line.total,\n        display: formatMoney(line.total, currency),\n      })),\n    [sortedLines, currency]\n  );\n\n  // Monthly cost trend, derived from the raw ledger (periodStart → YYYY-MM buckets).\n  const trend = useMemo(() => {\n    const buckets = new Map<string, number>();\n    for (const r of records.data ?? []) {\n      const d = new Date(r.periodStart);\n      if (Number.isNaN(d.getTime())) continue;\n      const key = `${d.getUTCFullYear()}-${String(d.getUTCMonth() + 1).padStart(2, '0')}`;\n      buckets.set(key, (buckets.get(key) ?? 0) + r.amount);\n    }\n    const series = [...buckets.entries()].sort(([a], [b]) => a.localeCompare(b));\n    const points = series.map(([, v]) => v);\n    const last = points[points.length - 1] ?? 0;\n    const prev = points[points.length - 2] ?? 0;\n    const deltaPct = prev > 0 ? Math.round(((last - prev) / prev) * 100) : null;\n    return { points, deltaPct };\n  }, [records.data]);\n\n  const onSearch = useCallback(\n    (e: React.FormEvent) => {\n      e.preventDefault();\n      setAppliedService(serviceInput.trim());\n    },\n    [serviceInput]\n  );\n\n  const clearService = useCallback(() => {\n    setServiceInput('');\n    setAppliedService('');\n  }, []);\n\n  const recordColumns: ResponsiveTableColumn<AdaCostRecord>[] = [\n    {\n      key: 'service',\n      header: t('adaptercloud.costs.service', 'Service'),\n      priority: 'primary',\n      cell: (r) => <span className=\"font-medium text-text-primary\">{r.service}</span>,\n    },\n    {\n      key: 'amount',\n      header: t('adaptercloud.costs.amount', 'Amount'),\n      priority: 'primary',\n      cell: (r) => (\n        <span className=\"tabular-nums text-text-primary\">{formatMoney(r.amount, r.currency)}</span>\n      ),\n    },\n    {\n      key: 'period',\n      header: t('adaptercloud.costs.period', 'Period'),\n      priority: 'secondary',\n      cell: (r) => (\n        <span className=\"text-sm text-text-secondary\">\n          {formatDate(r.periodStart, { hour: undefined, minute: undefined })} –{' '}\n          {formatDate(r.periodEnd, { hour: undefined, minute: undefined })}\n        </span>\n      ),\n    },\n    {\n      key: 'resource',\n      header: t('adaptercloud.costs.resource', 'Resource'),\n      priority: 'secondary',\n      cell: (r) =>\n        r.resource?.name ? (\n          <button\n            type=\"button\"\n            onClick={() => r.resourceId && navigateTo(`/resources/${r.resourceId}`)}\n            className=\"max-w-[12rem] truncate text-left text-sm text-accent-blue hover:underline\"\n          >\n            {r.resource.name}\n          </button>\n        ) : r.resourceId ? (\n          <span className=\"font-mono text-xs text-text-secondary\">\n            {r.resourceId.slice(0, 10)}…\n          </span>\n        ) : (\n          <span className=\"text-text-tertiary\">—</span>\n        ),\n    },\n    {\n      key: 'connection',\n      header: t('adaptercloud.costs.connection', 'Connection'),\n      priority: 'hidden-on-mobile',\n      cell: (r) =>\n        r.connection?.name ? (\n          <span className=\"max-w-[12rem] truncate text-sm text-text-primary\">\n            {r.connection.name}\n          </span>\n        ) : (\n          <span className=\"text-text-tertiary\">—</span>\n        ),\n    },\n  ];\n\n  return (\n    <PageLayout\n      title={t('adaptercloud.costs.title', 'FinOps')}\n      description={t(\n        'adaptercloud.costs.subtitle',\n        'Spend attributed to the same resources you operate — cost and topology share one model.'\n      )}\n    >\n      {/* Estate scope — narrows every panel on this page to one connection. */}\n      <div className=\"mb-6 flex flex-wrap items-center gap-3\">\n        <label htmlFor=\"ada-cost-connection\" className=\"text-sm text-text-secondary\">\n          {t('adaptercloud.costs.connection', 'Connection')}\n        </label>\n        <select\n          id=\"ada-cost-connection\"\n          value={connectionId}\n          onChange={(e) => setConnectionId(e.target.value)}\n          className=\"rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]\"\n        >\n          <option value=\"\">{t('adaptercloud.costs.allConnections', 'All connections')}</option>\n          {connectionOptions.map((c) => (\n            <option key={c.id} value={c.id}>\n              {c.name}\n            </option>\n          ))}\n        </select>\n      </div>\n\n      <DataState\n        isLoading={summary.isLoading}\n        isError={summary.isError}\n        error={summary.error}\n        onRetry={() => void summary.refetch()}\n      >\n        {/* Total + by-service */}\n        <EmphasisPanel className=\"mb-8\">\n          <div className=\"mb-4 flex items-center justify-between\">\n            <h2 className=\"text-lg font-semibold text-text-primary\">\n              {t('adaptercloud.costs.summary', 'Cost Summary')}\n            </h2>\n          </div>\n          <div className=\"grid grid-cols-2 gap-4 lg:grid-cols-4\">\n            <MetricsCard\n              featured\n              icon={<DollarSign className=\"h-5 w-5\" />}\n              value={summary.data ? formatMoney(summary.data.total, currency) : '—'}\n              label={t('adaptercloud.costs.totalSpend', 'Total Spend')}\n            />\n            {sortedLines.slice(0, 3).map((line) => (\n              <MetricsCard\n                key={line.service}\n                icon={<Receipt className=\"h-5 w-5\" />}\n                value={formatMoney(line.total, currency)}\n                label={line.service}\n              />\n            ))}\n          </div>\n        </EmphasisPanel>\n\n        {/* Full by-service breakdown + monthly trend */}\n        {sortedLines.length > 0 && (\n          <div className=\"mb-8 grid grid-cols-1 gap-6 lg:grid-cols-3\">\n            <section className=\"lg:col-span-2\">\n              <h2 className=\"mb-4 text-lg font-semibold text-text-primary\">\n                {t('adaptercloud.costs.byService', 'Spend by Service')}\n              </h2>\n              <GlassCard className=\"p-5\">\n                <BarChart data={serviceBars} labelWidthClassName=\"w-24 sm:w-32\" />\n              </GlassCard>\n            </section>\n\n            <section>\n              <h2 className=\"mb-4 text-lg font-semibold text-text-primary\">\n                {t('adaptercloud.costs.trend', 'Monthly Trend')}\n              </h2>\n              <GlassCard className=\"flex h-[calc(100%-2.75rem)] flex-col justify-between p-5\">\n                {trend.points.length >= 2 ? (\n                  <>\n                    <div className=\"flex items-baseline gap-2\">\n                      <span className=\"text-2xl font-bold tabular-nums text-text-primary\">\n                        {formatMoney(trend.points[trend.points.length - 1] ?? 0, currency)}\n                      </span>\n                      {trend.deltaPct !== null && (\n                        <span\n                          className={`text-xs font-semibold tabular-nums ${\n                            trend.deltaPct > 0\n                              ? 'text-status-error-text'\n                              : 'text-status-success-text'\n                          }`}\n                        >\n                          {trend.deltaPct > 0 ? '▲' : '▼'} {Math.abs(trend.deltaPct)}%{' '}\n                          {t('adaptercloud.costs.vsPrev', 'vs prev')}\n                        </span>\n                      )}\n                    </div>\n                    <Sparkline\n                      points={trend.points}\n                      className=\"mt-4 h-16 w-full text-accent-blue\"\n                    />\n                  </>\n                ) : (\n                  <p className=\"py-6 text-center text-sm text-text-secondary\">\n                    {t(\n                      'adaptercloud.costs.trendEmpty',\n                      'Ingest at least two months of cost to see a trend.'\n                    )}\n                  </p>\n                )}\n              </GlassCard>\n            </section>\n          </div>\n        )}\n      </DataState>\n\n      {/* Cost records ledger */}\n      <section>\n        <div className=\"mb-4 flex flex-wrap items-center justify-between gap-3\">\n          <h2 className=\"text-lg font-semibold text-text-primary\">\n            {t('adaptercloud.costs.records', 'Cost Records')}\n          </h2>\n          <form\n            onSubmit={onSearch}\n            role=\"search\"\n            className=\"flex w-full items-center gap-2 sm:w-auto\"\n          >\n            <div className=\"relative w-full sm:w-56\">\n              <input\n                type=\"text\"\n                value={serviceInput}\n                onChange={(e) => setServiceInput(e.target.value)}\n                aria-label={t('adaptercloud.costs.filterService', 'Filter by service')}\n                placeholder={t('adaptercloud.costs.filterServicePlaceholder', 'Filter by service…')}\n                className=\"w-full rounded-lg border border-border-subtle bg-bg-surface py-2 pl-3 pr-9 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]\"\n              />\n              {appliedService && (\n                <button\n                  type=\"button\"\n                  onClick={clearService}\n                  aria-label={t('adaptercloud.costs.clearServiceFilter', 'Clear service filter')}\n                  className=\"absolute right-2 top-1/2 -translate-y-1/2 rounded p-0.5 text-text-secondary transition-colors hover:text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]\"\n                >\n                  <X className=\"h-4 w-4\" />\n                </button>\n              )}\n            </div>\n            <button\n              type=\"submit\"\n              aria-label={t('adaptercloud.costs.applyServiceFilter', 'Apply service filter')}\n              className=\"inline-flex shrink-0 items-center justify-center rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 text-text-primary transition-colors hover:bg-accent focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]\"\n            >\n              <Search className=\"h-4 w-4\" />\n            </button>\n          </form>\n        </div>\n\n        <DataState\n          isLoading={records.isLoading}\n          isError={records.isError}\n          isEmpty={(records.data ?? []).length === 0}\n          error={records.error}\n          onRetry={() => void records.refetch()}\n          emptyTitle={t('adaptercloud.costs.emptyTitle', 'No cost records')}\n          emptyDescription={t(\n            'adaptercloud.costs.emptyDescription',\n            'Run a cost-ingest sync against a connection to populate the ledger.'\n          )}\n          emptyIcon={<Receipt className=\"h-10 w-10\" />}\n          emptyAction={\n            <button\n              type=\"button\"\n              onClick={() => navigateTo('/connections')}\n              className=\"rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text transition-colors hover:opacity-90\"\n            >\n              {t('adaptercloud.costs.goToConnections', 'Go to connections')}\n            </button>\n          }\n        >\n          <ResponsiveTable data={records.data ?? []} columns={recordColumns} rowKey={(r) => r.id} />\n        </DataState>\n      </section>\n    </PageLayout>\n  );\n}\n"],"mappings":"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"}

package/dist/adaptercloud/pages/drift/DriftListPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DriftListPage.d.ts","sourceRoot":"","sources":["../../../../src/adaptercloud/pages/drift/DriftListPage.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAsCH,wBAAgB,aAAa,gCAoP5B"}
+{"version":3,"file":"DriftListPage.d.ts","sourceRoot":"","sources":["../../../../src/adaptercloud/pages/drift/DriftListPage.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAsCH,wBAAgB,aAAa,gCA2P5B"}