@burdenoff/microfe-adaptercloud 2026.825.3 → 2026.827.1

package/dist/adaptercloud/pages/connections/ConnectionsListPage.js

@@ -37,7 +37,7 @@ function N() {
 	}), L = o({
 		status: "PUBLISHED",
 		pagination: { limit: 100 }
-	}).data?.items ?? [], R = I.data?.items ?? [], z = I.data?.pageInfo.hasMore ?? !1, B = u(() => {
+	}).data?.items ?? [], R = u(() => I.data?.items ?? [], [I.data?.items]), z = I.data?.pageInfo.hasMore ?? !1, B = I.data?.pageInfo.totalCount, V = u(() => {
 		let e = T.trim().toLowerCase();
 		return e ? R.filter((t) => t.name.toLowerCase().includes(e) || (t.region?.toLowerCase().includes(e) ?? !1) || (t.environment?.toLowerCase().includes(e) ?? !1)) : R;
 	}, [R, T]);
@@ -113,12 +113,12 @@ function 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",
 				children: v("adaptercloud.connections.new", "New connection")
 			}),
-			children: [B.length === 0 ? /* @__PURE__ */ O("p", {
+			children: [V.length === 0 ? /* @__PURE__ */ O("p", {
 				className: "rounded-xl border border-border-subtle bg-bg-surface px-4 py-10 text-center text-sm text-text-secondary",
 				children: v("adaptercloud.connections.noSearchMatch", "No connections match your search.")
 			}) : /* @__PURE__ */ O("div", {
 				className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3",
-				children: B.map((e) => /* @__PURE__ */ k(A, {
+				children: V.map((e) => /* @__PURE__ */ k(A, {
 					role: "button",
 					tabIndex: 0,
 					onClick: () => p(`/connections/${e.id}`),
@@ -205,13 +205,14 @@ function N() {
 						children: [/* @__PURE__ */ O(h, { className: "h-4 w-4" }), v("adaptercloud.common.prev", "Previous")]
 					}),
 					/* @__PURE__ */ k("span", {
-						className: "text-sm text-text-secondary",
+						className: "text-sm tabular-nums text-text-secondary",
 						children: [
 							v("adaptercloud.common.showing", "Showing"),
 							" ",
 							P + 1,
 							"–",
-							P + R.length
+							P + R.length,
+							B != null && ` ${v("adaptercloud.common.of", "of")} ${B}`
 						]
 					}),
 					/* @__PURE__ */ k("button", {

package/dist/adaptercloud/pages/connections/ConnectionsListPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConnectionsListPage.js","names":[],"sources":["../../../../src/adaptercloud/pages/connections/ConnectionsListPage.tsx"],"sourcesContent":["/**\n * Connections List Page\n * @module adaptercloud/pages/connections\n *\n * Every configured, authenticated target in the workspace. Lists from\n * `adaListConnections` with an adapter + status filter, a client-side search,\n * and offset pagination. Each card carries a per-adapter-kind glyph tile so the\n * fabric's reach reads at a glance (mirrors the aws/azure/gke/snowflake logos in\n * the mock).\n */\n\nimport { useState, useCallback, useMemo } from 'react';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport {\n  Cable,\n  Plus,\n  ChevronLeft,\n  ChevronRight,\n  MapPin,\n  Server,\n  Search,\n  Cloud,\n  Radio,\n  Cpu,\n  Boxes,\n  Network,\n  Database,\n  HardDrive,\n  Puzzle,\n  type LucideIcon,\n} from 'lucide-react';\nimport { GlassCard } from '@burdenoff/fe-libs/ui';\nimport { PageLayout } from '../../components/PageLayout';\nimport { StatusBadge } from '../../components/StatusBadge';\nimport { DataState } from '../../components/DataState';\nimport { useAdapterCloud } from '../../context/AdapterCloudContext';\nimport { useConnections, useAdapters } from '../../hooks/useAdapterCloudApi';\nimport { authMethodLabels, connectionStatusLabels } from '../../utils/domain';\nimport { formatRelativeTime } from '../../utils/formatters';\nimport type { AdaAdapterKind, AdaConnectionStatus } from '../../types';\n\nconst PAGE_SIZE = 20;\n\n/**\n * Per-adapter-kind glyph — stands in for the vendor logos (aws / azure / gke /\n * snowflake) in the mock. Keyed off the connection's bound adapter kind; every\n * `AdaAdapterKind` maps to one of the eight allowed lucide marks.\n */\nconst adapterKindIcon: Record<AdaAdapterKind, LucideIcon> = {\n  PUBLIC_CLOUD: Cloud,\n  PRIVATE_CLOUD: Cloud,\n  SAAS: Cloud,\n  ON_PREM: HardDrive,\n  EDGE: Radio,\n  IOT: Cpu,\n  KUBERNETES: Boxes,\n  NETWORK: Network,\n  DATA_SYSTEM: Database,\n  CUSTOM: Puzzle,\n};\n\nexport function ConnectionsListPage() {\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 [status, setStatus] = useState<AdaConnectionStatus | ''>('');\n  const [adapterId, setAdapterId] = useState('');\n  const [search, setSearch] = useState('');\n  const [offset, setOffset] = useState(0);\n\n  const query = useConnections({\n    adapterId: adapterId || undefined,\n    status: status || undefined,\n    pagination: { limit: PAGE_SIZE, offset },\n  });\n\n  // Published adapters power the adapter filter dropdown (mock's \"Adapter filter\").\n  const adaptersQuery = useAdapters({ status: 'PUBLISHED', pagination: { limit: 100 } });\n  const adapterOptions = adaptersQuery.data?.items ?? [];\n\n  const items = query.data?.items ?? [];\n  const hasMore = query.data?.pageInfo.hasMore ?? false;\n\n  // Client-side search over the loaded page (name / region / environment).\n  const filtered = useMemo(() => {\n    const q = search.trim().toLowerCase();\n    if (!q) return items;\n    return items.filter(\n      (c) =>\n        c.name.toLowerCase().includes(q) ||\n        (c.region?.toLowerCase().includes(q) ?? false) ||\n        (c.environment?.toLowerCase().includes(q) ?? false)\n    );\n  }, [items, search]);\n\n  return (\n    <PageLayout\n      title={t('adaptercloud.connections.title', 'Connections')}\n      description={t(\n        'adaptercloud.connections.subtitle',\n        'Configured, authenticated targets — each connection is where the fabric actually reaches.'\n      )}\n      actions={\n        <button\n          type=\"button\"\n          onClick={() => navigateTo('/connections/new')}\n          className=\"inline-flex items-center gap-2 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          <Plus className=\"h-4 w-4\" />\n          {t('adaptercloud.connections.new', 'New connection')}\n        </button>\n      }\n    >\n      <div className=\"mb-6 flex flex-wrap items-center gap-3\">\n        <select\n          value={status}\n          onChange={(e) => {\n            setStatus(e.target.value as AdaConnectionStatus | '');\n            setOffset(0);\n          }}\n          aria-label={t('adaptercloud.connections.filterByStatus', 'Filter by status')}\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.connections.allStatuses', 'All statuses')}</option>\n          {(Object.keys(connectionStatusLabels) as AdaConnectionStatus[]).map((s) => (\n            <option key={s} value={s}>\n              {connectionStatusLabels[s]}\n            </option>\n          ))}\n        </select>\n\n        <select\n          value={adapterId}\n          onChange={(e) => {\n            setAdapterId(e.target.value);\n            setOffset(0);\n          }}\n          aria-label={t('adaptercloud.connections.filterByAdapter', 'Filter by adapter')}\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.connections.allAdapters', 'All adapters')}</option>\n          {adapterOptions.map((a) => (\n            <option key={a.id} value={a.id}>\n              {a.name}\n            </option>\n          ))}\n        </select>\n\n        <div className=\"relative w-full sm:ml-auto sm:w-64\">\n          <Search\n            aria-hidden=\"true\"\n            className=\"pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-text-secondary\"\n          />\n          <input\n            type=\"search\"\n            value={search}\n            onChange={(e) => setSearch(e.target.value)}\n            aria-label={t('adaptercloud.connections.search', 'Search connections')}\n            placeholder={t('adaptercloud.connections.searchPlaceholder', 'Search…')}\n            className=\"w-full rounded-lg border border-border-subtle bg-bg-surface py-2 pl-9 pr-3 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]\"\n          />\n        </div>\n      </div>\n\n      <DataState\n        isLoading={query.isLoading}\n        isError={query.isError}\n        isEmpty={items.length === 0}\n        error={query.error}\n        onRetry={() => void query.refetch()}\n        emptyTitle={t('adaptercloud.connections.emptyTitle', 'No connections yet')}\n        emptyDescription={t(\n          'adaptercloud.connections.emptyDescription',\n          'Create a connection to a real target to start discovering resources.'\n        )}\n        emptyIcon={<Cable className=\"h-10 w-10\" />}\n        emptyAction={\n          <button\n            type=\"button\"\n            onClick={() => navigateTo('/connections/new')}\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.connections.new', 'New connection')}\n          </button>\n        }\n      >\n        {filtered.length === 0 ? (\n          <p className=\"rounded-xl border border-border-subtle bg-bg-surface px-4 py-10 text-center text-sm text-text-secondary\">\n            {t('adaptercloud.connections.noSearchMatch', 'No connections match your search.')}\n          </p>\n        ) : (\n          <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n            {filtered.map((conn) => {\n              const KindIcon = conn.adapter?.kind ? adapterKindIcon[conn.adapter.kind] : Cable;\n              return (\n                <GlassCard\n                  key={conn.id}\n                  role=\"button\"\n                  tabIndex={0}\n                  onClick={() => navigateTo(`/connections/${conn.id}`)}\n                  onKeyDown={(e) => {\n                    if (e.key === 'Enter' || e.key === ' ') {\n                      e.preventDefault();\n                      navigateTo(`/connections/${conn.id}`);\n                    }\n                  }}\n                  className=\"cursor-pointer p-5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]\"\n                >\n                  <div className=\"flex items-start gap-3\">\n                    <div className=\"flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-bg-sunken text-accent-blue\">\n                      <KindIcon className=\"h-5 w-5\" aria-hidden=\"true\" />\n                    </div>\n                    <div className=\"min-w-0 flex-1\">\n                      <div className=\"flex items-start justify-between gap-2\">\n                        <div className=\"min-w-0\">\n                          <h3 className=\"truncate text-base font-semibold text-text-primary\">\n                            {conn.name}\n                          </h3>\n                          {conn.adapter && (\n                            <p className=\"mt-0.5 truncate text-xs text-text-secondary\">\n                              {conn.adapter.name}\n                            </p>\n                          )}\n                        </div>\n                        <StatusBadge status={conn.status} />\n                      </div>\n                    </div>\n                  </div>\n\n                  <div className=\"mt-3 flex flex-wrap items-center gap-3 text-xs text-text-secondary\">\n                    <span className=\"inline-flex items-center rounded-full bg-bg-sunken px-2 py-0.5\">\n                      {authMethodLabels[conn.authMethod]}\n                    </span>\n                    {conn.region && (\n                      <span className=\"flex items-center gap-1\">\n                        <MapPin className=\"h-3 w-3\" /> {conn.region}\n                      </span>\n                    )}\n                    {conn.environment && <span>· {conn.environment}</span>}\n                  </div>\n\n                  <div className=\"mt-4 flex items-center gap-2 text-sm text-text-primary\">\n                    <Server className=\"h-4 w-4 text-text-secondary\" />\n                    <span className=\"font-semibold tabular-nums\">{conn.resourceCount}</span>\n                    <span className=\"text-text-secondary\">\n                      {t('adaptercloud.connections.resources', 'resources')}\n                    </span>\n                  </div>\n\n                  {conn.lastError && (\n                    <p className=\"mt-3 line-clamp-2 rounded-lg bg-status-error-bg-subtle px-2 py-1 text-xs text-status-error-text\">\n                      {conn.lastError}\n                    </p>\n                  )}\n\n                  <p className=\"mt-4 text-xs text-text-secondary\">\n                    {conn.lastSyncedAt\n                      ? `${t('adaptercloud.connections.lastSynced', 'Last synced')} ${formatRelativeTime(conn.lastSyncedAt)}`\n                      : t('adaptercloud.connections.neverSynced', 'Never synced')}\n                  </p>\n                </GlassCard>\n              );\n            })}\n          </div>\n        )}\n\n        {(offset > 0 || hasMore) && (\n          <div className=\"mt-6 flex items-center justify-between\">\n            <button\n              type=\"button\"\n              disabled={offset === 0}\n              onClick={() => setOffset((o) => Math.max(0, o - PAGE_SIZE))}\n              className=\"inline-flex items-center gap-1 rounded-lg border border-border-subtle px-3 py-2 text-sm font-medium text-text-primary transition-colors hover:bg-accent disabled:cursor-not-allowed disabled:opacity-50\"\n            >\n              <ChevronLeft className=\"h-4 w-4\" />\n              {t('adaptercloud.common.prev', 'Previous')}\n            </button>\n            <span className=\"text-sm text-text-secondary\">\n              {t('adaptercloud.common.showing', 'Showing')} {offset + 1}–{offset + items.length}\n            </span>\n            <button\n              type=\"button\"\n              disabled={!hasMore}\n              onClick={() => setOffset((o) => o + PAGE_SIZE)}\n              className=\"inline-flex items-center gap-1 rounded-lg border border-border-subtle px-3 py-2 text-sm font-medium text-text-primary transition-colors hover:bg-accent disabled:cursor-not-allowed disabled:opacity-50\"\n            >\n              {t('adaptercloud.common.next', 'Next')}\n              <ChevronRight className=\"h-4 w-4\" />\n            </button>\n          </div>\n        )}\n      </DataState>\n    </PageLayout>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"ConnectionsListPage.js","names":[],"sources":["../../../../src/adaptercloud/pages/connections/ConnectionsListPage.tsx"],"sourcesContent":["/**\n * Connections List Page\n * @module adaptercloud/pages/connections\n *\n * Every configured, authenticated target in the workspace. Lists from\n * `adaListConnections` with an adapter + status filter, a client-side search,\n * and offset pagination. Each card carries a per-adapter-kind glyph tile so the\n * fabric's reach reads at a glance (mirrors the aws/azure/gke/snowflake logos in\n * the mock).\n */\n\nimport { useState, useCallback, useMemo } from 'react';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport {\n  Cable,\n  Plus,\n  ChevronLeft,\n  ChevronRight,\n  MapPin,\n  Server,\n  Search,\n  Cloud,\n  Radio,\n  Cpu,\n  Boxes,\n  Network,\n  Database,\n  HardDrive,\n  Puzzle,\n  type LucideIcon,\n} from 'lucide-react';\nimport { GlassCard } from '@burdenoff/fe-libs/ui';\nimport { PageLayout } from '../../components/PageLayout';\nimport { StatusBadge } from '../../components/StatusBadge';\nimport { DataState } from '../../components/DataState';\nimport { useAdapterCloud } from '../../context/AdapterCloudContext';\nimport { useConnections, useAdapters } from '../../hooks/useAdapterCloudApi';\nimport { authMethodLabels, connectionStatusLabels } from '../../utils/domain';\nimport { formatRelativeTime } from '../../utils/formatters';\nimport type { AdaAdapterKind, AdaConnectionStatus } from '../../types';\n\nconst PAGE_SIZE = 20;\n\n/**\n * Per-adapter-kind glyph — stands in for the vendor logos (aws / azure / gke /\n * snowflake) in the mock. Keyed off the connection's bound adapter kind; every\n * `AdaAdapterKind` maps to one of the eight allowed lucide marks.\n */\nconst adapterKindIcon: Record<AdaAdapterKind, LucideIcon> = {\n  PUBLIC_CLOUD: Cloud,\n  PRIVATE_CLOUD: Cloud,\n  SAAS: Cloud,\n  ON_PREM: HardDrive,\n  EDGE: Radio,\n  IOT: Cpu,\n  KUBERNETES: Boxes,\n  NETWORK: Network,\n  DATA_SYSTEM: Database,\n  CUSTOM: Puzzle,\n};\n\nexport function ConnectionsListPage() {\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 [status, setStatus] = useState<AdaConnectionStatus | ''>('');\n  const [adapterId, setAdapterId] = useState('');\n  const [search, setSearch] = useState('');\n  const [offset, setOffset] = useState(0);\n\n  const query = useConnections({\n    adapterId: adapterId || undefined,\n    status: status || undefined,\n    pagination: { limit: PAGE_SIZE, offset },\n  });\n\n  // Published adapters power the adapter filter dropdown (mock's \"Adapter filter\").\n  const adaptersQuery = useAdapters({ status: 'PUBLISHED', pagination: { limit: 100 } });\n  const adapterOptions = adaptersQuery.data?.items ?? [];\n\n  const items = useMemo(() => query.data?.items ?? [], [query.data?.items]);\n  const hasMore = query.data?.pageInfo.hasMore ?? false;\n  // Estate-wide total for the current filter. Nullable on older deployed\n  // schemas — the footer then falls back to the bare offset range.\n  const totalCount = query.data?.pageInfo.totalCount;\n\n  // Client-side search over the loaded page (name / region / environment).\n  const filtered = useMemo(() => {\n    const q = search.trim().toLowerCase();\n    if (!q) return items;\n    return items.filter(\n      (c) =>\n        c.name.toLowerCase().includes(q) ||\n        (c.region?.toLowerCase().includes(q) ?? false) ||\n        (c.environment?.toLowerCase().includes(q) ?? false)\n    );\n  }, [items, search]);\n\n  return (\n    <PageLayout\n      title={t('adaptercloud.connections.title', 'Connections')}\n      description={t(\n        'adaptercloud.connections.subtitle',\n        'Configured, authenticated targets — each connection is where the fabric actually reaches.'\n      )}\n      actions={\n        <button\n          type=\"button\"\n          onClick={() => navigateTo('/connections/new')}\n          className=\"inline-flex items-center gap-2 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          <Plus className=\"h-4 w-4\" />\n          {t('adaptercloud.connections.new', 'New connection')}\n        </button>\n      }\n    >\n      <div className=\"mb-6 flex flex-wrap items-center gap-3\">\n        <select\n          value={status}\n          onChange={(e) => {\n            setStatus(e.target.value as AdaConnectionStatus | '');\n            setOffset(0);\n          }}\n          aria-label={t('adaptercloud.connections.filterByStatus', 'Filter by status')}\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.connections.allStatuses', 'All statuses')}</option>\n          {(Object.keys(connectionStatusLabels) as AdaConnectionStatus[]).map((s) => (\n            <option key={s} value={s}>\n              {connectionStatusLabels[s]}\n            </option>\n          ))}\n        </select>\n\n        <select\n          value={adapterId}\n          onChange={(e) => {\n            setAdapterId(e.target.value);\n            setOffset(0);\n          }}\n          aria-label={t('adaptercloud.connections.filterByAdapter', 'Filter by adapter')}\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.connections.allAdapters', 'All adapters')}</option>\n          {adapterOptions.map((a) => (\n            <option key={a.id} value={a.id}>\n              {a.name}\n            </option>\n          ))}\n        </select>\n\n        <div className=\"relative w-full sm:ml-auto sm:w-64\">\n          <Search\n            aria-hidden=\"true\"\n            className=\"pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-text-secondary\"\n          />\n          <input\n            type=\"search\"\n            value={search}\n            onChange={(e) => setSearch(e.target.value)}\n            aria-label={t('adaptercloud.connections.search', 'Search connections')}\n            placeholder={t('adaptercloud.connections.searchPlaceholder', 'Search…')}\n            className=\"w-full rounded-lg border border-border-subtle bg-bg-surface py-2 pl-9 pr-3 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]\"\n          />\n        </div>\n      </div>\n\n      <DataState\n        isLoading={query.isLoading}\n        isError={query.isError}\n        isEmpty={items.length === 0}\n        error={query.error}\n        onRetry={() => void query.refetch()}\n        emptyTitle={t('adaptercloud.connections.emptyTitle', 'No connections yet')}\n        emptyDescription={t(\n          'adaptercloud.connections.emptyDescription',\n          'Create a connection to a real target to start discovering resources.'\n        )}\n        emptyIcon={<Cable className=\"h-10 w-10\" />}\n        emptyAction={\n          <button\n            type=\"button\"\n            onClick={() => navigateTo('/connections/new')}\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.connections.new', 'New connection')}\n          </button>\n        }\n      >\n        {filtered.length === 0 ? (\n          <p className=\"rounded-xl border border-border-subtle bg-bg-surface px-4 py-10 text-center text-sm text-text-secondary\">\n            {t('adaptercloud.connections.noSearchMatch', 'No connections match your search.')}\n          </p>\n        ) : (\n          <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n            {filtered.map((conn) => {\n              const KindIcon = conn.adapter?.kind ? adapterKindIcon[conn.adapter.kind] : Cable;\n              return (\n                <GlassCard\n                  key={conn.id}\n                  role=\"button\"\n                  tabIndex={0}\n                  onClick={() => navigateTo(`/connections/${conn.id}`)}\n                  onKeyDown={(e) => {\n                    if (e.key === 'Enter' || e.key === ' ') {\n                      e.preventDefault();\n                      navigateTo(`/connections/${conn.id}`);\n                    }\n                  }}\n                  className=\"cursor-pointer p-5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]\"\n                >\n                  <div className=\"flex items-start gap-3\">\n                    <div className=\"flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-bg-sunken text-accent-blue\">\n                      <KindIcon className=\"h-5 w-5\" aria-hidden=\"true\" />\n                    </div>\n                    <div className=\"min-w-0 flex-1\">\n                      <div className=\"flex items-start justify-between gap-2\">\n                        <div className=\"min-w-0\">\n                          <h3 className=\"truncate text-base font-semibold text-text-primary\">\n                            {conn.name}\n                          </h3>\n                          {conn.adapter && (\n                            <p className=\"mt-0.5 truncate text-xs text-text-secondary\">\n                              {conn.adapter.name}\n                            </p>\n                          )}\n                        </div>\n                        <StatusBadge status={conn.status} />\n                      </div>\n                    </div>\n                  </div>\n\n                  <div className=\"mt-3 flex flex-wrap items-center gap-3 text-xs text-text-secondary\">\n                    <span className=\"inline-flex items-center rounded-full bg-bg-sunken px-2 py-0.5\">\n                      {authMethodLabels[conn.authMethod]}\n                    </span>\n                    {conn.region && (\n                      <span className=\"flex items-center gap-1\">\n                        <MapPin className=\"h-3 w-3\" /> {conn.region}\n                      </span>\n                    )}\n                    {conn.environment && <span>· {conn.environment}</span>}\n                  </div>\n\n                  <div className=\"mt-4 flex items-center gap-2 text-sm text-text-primary\">\n                    <Server className=\"h-4 w-4 text-text-secondary\" />\n                    <span className=\"font-semibold tabular-nums\">{conn.resourceCount}</span>\n                    <span className=\"text-text-secondary\">\n                      {t('adaptercloud.connections.resources', 'resources')}\n                    </span>\n                  </div>\n\n                  {conn.lastError && (\n                    <p className=\"mt-3 line-clamp-2 rounded-lg bg-status-error-bg-subtle px-2 py-1 text-xs text-status-error-text\">\n                      {conn.lastError}\n                    </p>\n                  )}\n\n                  <p className=\"mt-4 text-xs text-text-secondary\">\n                    {conn.lastSyncedAt\n                      ? `${t('adaptercloud.connections.lastSynced', 'Last synced')} ${formatRelativeTime(conn.lastSyncedAt)}`\n                      : t('adaptercloud.connections.neverSynced', 'Never synced')}\n                  </p>\n                </GlassCard>\n              );\n            })}\n          </div>\n        )}\n\n        {(offset > 0 || hasMore) && (\n          <div className=\"mt-6 flex items-center justify-between\">\n            <button\n              type=\"button\"\n              disabled={offset === 0}\n              onClick={() => setOffset((o) => Math.max(0, o - PAGE_SIZE))}\n              className=\"inline-flex items-center gap-1 rounded-lg border border-border-subtle px-3 py-2 text-sm font-medium text-text-primary transition-colors hover:bg-accent disabled:cursor-not-allowed disabled:opacity-50\"\n            >\n              <ChevronLeft className=\"h-4 w-4\" />\n              {t('adaptercloud.common.prev', 'Previous')}\n            </button>\n            <span className=\"text-sm tabular-nums text-text-secondary\">\n              {t('adaptercloud.common.showing', 'Showing')} {offset + 1}–{offset + items.length}\n              {totalCount != null && ` ${t('adaptercloud.common.of', 'of')} ${totalCount}`}\n            </span>\n            <button\n              type=\"button\"\n              disabled={!hasMore}\n              onClick={() => setOffset((o) => o + PAGE_SIZE)}\n              className=\"inline-flex items-center gap-1 rounded-lg border border-border-subtle px-3 py-2 text-sm font-medium text-text-primary transition-colors hover:bg-accent disabled:cursor-not-allowed disabled:opacity-50\"\n            >\n              {t('adaptercloud.common.next', 'Next')}\n              <ChevronRight className=\"h-4 w-4\" />\n            </button>\n          </div>\n        )}\n      </DataState>\n    </PageLayout>\n  );\n}\n"],"mappings":"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"}

package/dist/adaptercloud/pages/costs/CostsPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CostsPage.d.ts","sourceRoot":"","sources":["../../../../src/adaptercloud/pages/costs/CostsPage.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAqBH,wBAAgB,SAAS,gCAkSxB"}
+{"version":3,"file":"CostsPage.d.ts","sourceRoot":"","sources":["../../../../src/adaptercloud/pages/costs/CostsPage.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAwBH,wBAAgB,SAAS,gCAgUxB"}

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