@burdenoff/microfe-adaptercloud 2026.825.4 → 2026.827.1

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"}

package/dist/adaptercloud/pages/drift/DriftListPage.js

@@ -5,16 +5,16 @@ import { driftStatusLabels as r, severityRank as i } from "../../utils/domain.js
 import { StatusBadge as a } from "../../components/StatusBadge.js";
 import { SeverityBadge as o } from "../../components/SeverityBadge.js";
 import { DataState as s } from "../../components/DataState.js";
-import { useDriftRecords as c, useRemediateDrift as l } from "../../hooks/useAdapterCloudApi.js";
-import { formatDate as u } from "../../utils/formatters.js";
-import { ConfirmDialog as d } from "../../components/ConfirmDialog.js";
-import { useCallback as f, useMemo as p, useState as m } from "react";
-import { useI18n as h } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
-import { ArrowRight as g, GitCompareArrows as _, Loader2 as v, Wrench as y } from "lucide-react";
-import { jsx as b, jsxs as x } from "react/jsx-runtime";
-import { GlassCard as S } from "@burdenoff/fe-libs/ui";
+import { useDriftCount as c, useDriftRecords as l, useRemediateDrift as u } from "../../hooks/useAdapterCloudApi.js";
+import { formatDate as d } from "../../utils/formatters.js";
+import { ConfirmDialog as f } from "../../components/ConfirmDialog.js";
+import { useCallback as p, useMemo as m, useState as h } from "react";
+import { useI18n as g } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { ArrowRight as _, GitCompareArrows as v, Loader2 as y, Wrench as b } from "lucide-react";
+import { jsx as x, jsxs as S } from "react/jsx-runtime";
+import { GlassCard as C } from "@burdenoff/fe-libs/ui";
 //#region src/adaptercloud/pages/drift/DriftListPage.tsx
-var C = [
+var w = [
 	{
 		status: "DETECTED",
 		className: "bg-status-warning-bg-subtle text-status-warning-text"
@@ -32,202 +32,203 @@ var C = [
 		className: "bg-bg-sunken text-text-secondary"
 	}
 ];
-function w(e) {
+function T(e) {
 	return e === null || [
 		"string",
 		"number",
 		"boolean"
 	].includes(typeof e);
 }
-function T(e) {
+function E(e) {
 	return e == null ? "—" : typeof e == "string" ? e : JSON.stringify(e);
 }
-function E() {
-	let { navigateTo: E } = e(), { t: D } = h(), O = f((e, t) => {
-		let n = D(e);
+function D() {
+	let { navigateTo: D } = e(), { t: O } = g(), k = p((e, t) => {
+		let n = O(e);
 		return n === e ? t : n;
-	}, [D]), [k, A] = m("DETECTED"), [j, M] = m(null), [N, P] = m(null), F = c({ status: k || void 0 }), I = l(), L = c({}), R = p(() => {
-		let e = {
-			DETECTED: 0,
-			ACKNOWLEDGED: 0,
-			REMEDIATED: 0,
-			IGNORED: 0
-		};
-		for (let t of L.data ?? []) e[t.status] += 1;
-		return e;
-	}, [L.data]), z = (L.data?.length ?? 0) > 0, B = [...F.data ?? []].sort((e, t) => i[t.severity] - i[e.severity]), V = I.isPending ? I.variables : void 0, H = f((e) => {
-		M(null), I.mutate(e, {
-			onSuccess: () => P(null),
-			onError: (e) => M(e instanceof Error ? e.message : "Failed to remediate drift.")
+	}, [O]), [A, j] = h("DETECTED"), [M, N] = h(null), [P, F] = h(null), I = l({ status: A || void 0 }), L = u(), R = c("DETECTED"), z = c("ACKNOWLEDGED"), B = c("REMEDIATED"), V = c("IGNORED"), H = m(() => ({
+		DETECTED: R.data ?? null,
+		ACKNOWLEDGED: z.data ?? null,
+		REMEDIATED: B.data ?? null,
+		IGNORED: V.data ?? null
+	}), [
+		R.data,
+		z.data,
+		B.data,
+		V.data
+	]), U = Object.values(H).some((e) => e != null && e > 0), W = [...I.data ?? []].sort((e, t) => i[t.severity] - i[e.severity]), G = L.isPending ? L.variables : void 0, K = p((e) => {
+		N(null), L.mutate(e, {
+			onSuccess: () => F(null),
+			onError: (e) => N(e instanceof Error ? e.message : "Failed to remediate drift.")
 		});
-	}, [I]);
-	return /* @__PURE__ */ x(n, {
-		title: O("adaptercloud.drift.title", "Drift"),
-		description: O("adaptercloud.drift.subtitle", "Divergences between observed and desired state, surfaced during reconciliation."),
+	}, [L]);
+	return /* @__PURE__ */ S(n, {
+		title: k("adaptercloud.drift.title", "Drift"),
+		description: k("adaptercloud.drift.subtitle", "Divergences between observed and desired state, surfaced during reconciliation."),
 		children: [
-			z && /* @__PURE__ */ b("div", {
+			U && /* @__PURE__ */ x("div", {
 				className: "mb-4 flex flex-wrap gap-2",
-				children: C.map((e) => {
-					let n = k === e.status;
-					return /* @__PURE__ */ x("button", {
+				children: w.map((e) => {
+					let n = A === e.status;
+					return /* @__PURE__ */ S("button", {
 						type: "button",
-						onClick: () => A(n ? "" : e.status),
+						onClick: () => j(n ? "" : e.status),
 						"aria-pressed": n,
 						className: t("inline-flex items-center gap-2 rounded-full px-3 py-1.5 text-sm font-medium transition-shadow", e.className, n && "ring-2 ring-inset ring-[var(--color-focus-ring)]"),
-						children: [/* @__PURE__ */ b("span", {
+						children: [/* @__PURE__ */ x("span", {
 							className: "text-base font-semibold tabular-nums",
-							children: R[e.status]
-						}), /* @__PURE__ */ b("span", { children: r[e.status].toLowerCase() })]
+							children: H[e.status] ?? "—"
+						}), /* @__PURE__ */ x("span", { children: r[e.status].toLowerCase() })]
 					}, e.status);
 				})
 			}),
-			/* @__PURE__ */ b("div", {
+			/* @__PURE__ */ x("div", {
 				className: "mb-6 flex flex-wrap gap-3",
-				children: /* @__PURE__ */ x("select", {
-					value: k,
-					onChange: (e) => A(e.target.value),
-					"aria-label": O("adaptercloud.drift.filterByStatus", "Filter by status"),
+				children: /* @__PURE__ */ S("select", {
+					value: A,
+					onChange: (e) => j(e.target.value),
+					"aria-label": k("adaptercloud.drift.filterByStatus", "Filter by status"),
 					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", {
+					children: [/* @__PURE__ */ x("option", {
 						value: "",
-						children: O("adaptercloud.drift.allStatuses", "All statuses")
-					}), Object.keys(r).map((e) => /* @__PURE__ */ b("option", {
+						children: k("adaptercloud.drift.allStatuses", "All statuses")
+					}), Object.keys(r).map((e) => /* @__PURE__ */ x("option", {
 						value: e,
 						children: r[e]
 					}, e))]
 				})
 			}),
-			j && /* @__PURE__ */ b("p", {
+			M && /* @__PURE__ */ x("p", {
 				role: "alert",
 				"aria-live": "polite",
 				className: "mb-4 rounded-lg bg-status-error-bg-subtle px-3 py-2 text-sm text-status-error-text",
-				children: j
+				children: M
 			}),
-			/* @__PURE__ */ b(s, {
-				isLoading: F.isLoading,
-				isError: F.isError,
-				isEmpty: B.length === 0,
-				error: F.error,
-				onRetry: () => void F.refetch(),
-				emptyTitle: O("adaptercloud.drift.emptyTitle", "No drift"),
-				emptyDescription: O("adaptercloud.drift.emptyDescription", "Nothing matches this filter — observed state matches desired state."),
-				emptyIcon: /* @__PURE__ */ b(_, { className: "h-10 w-10" }),
-				children: /* @__PURE__ */ b("div", {
+			/* @__PURE__ */ x(s, {
+				isLoading: I.isLoading,
+				isError: I.isError,
+				isEmpty: W.length === 0,
+				error: I.error,
+				onRetry: () => void I.refetch(),
+				emptyTitle: k("adaptercloud.drift.emptyTitle", "No drift"),
+				emptyDescription: k("adaptercloud.drift.emptyDescription", "Nothing matches this filter — observed state matches desired state."),
+				emptyIcon: /* @__PURE__ */ x(v, { className: "h-10 w-10" }),
+				children: /* @__PURE__ */ x("div", {
 					className: "space-y-3",
-					children: B.map((e) => {
+					children: W.map((e) => {
 						let t = e.status === "DETECTED" || e.status === "ACKNOWLEDGED";
-						return /* @__PURE__ */ b(S, {
+						return /* @__PURE__ */ x(C, {
 							className: "p-5",
-							children: /* @__PURE__ */ x("div", {
+							children: /* @__PURE__ */ S("div", {
 								className: "flex flex-wrap items-start justify-between gap-3",
-								children: [/* @__PURE__ */ x("div", {
+								children: [/* @__PURE__ */ S("div", {
 									className: "min-w-0 flex-1",
 									children: [
-										/* @__PURE__ */ x("div", {
+										/* @__PURE__ */ S("div", {
 											className: "mb-1.5 flex flex-wrap items-center gap-2",
-											children: [/* @__PURE__ */ b(o, { severity: e.severity }), /* @__PURE__ */ b(a, {
+											children: [/* @__PURE__ */ x(o, { severity: e.severity }), /* @__PURE__ */ x(a, {
 												status: e.status,
 												label: r[e.status]
 											})]
 										}),
-										/* @__PURE__ */ b("p", {
+										/* @__PURE__ */ x("p", {
 											className: "break-all font-mono text-sm font-medium text-text-primary",
 											children: e.attributePath
 										}),
-										w(e.expectedValue) && w(e.observedValue) ? /* @__PURE__ */ x("div", {
+										T(e.expectedValue) && T(e.observedValue) ? /* @__PURE__ */ S("div", {
 											className: "mt-3 flex flex-wrap items-end gap-2",
 											children: [
-												/* @__PURE__ */ x("div", {
+												/* @__PURE__ */ S("div", {
 													className: "min-w-0",
-													children: [/* @__PURE__ */ b("p", {
+													children: [/* @__PURE__ */ x("p", {
 														className: "mb-1 text-xs font-semibold uppercase tracking-wide text-text-muted",
-														children: O("adaptercloud.drift.expected", "Expected")
-													}), /* @__PURE__ */ b("span", {
+														children: k("adaptercloud.drift.expected", "Expected")
+													}), /* @__PURE__ */ x("span", {
 														className: "inline-block max-w-full break-all rounded-md bg-status-error-bg-subtle px-2.5 py-1 font-mono text-xs text-status-error-text",
-														children: T(e.expectedValue)
+														children: E(e.expectedValue)
 													})]
 												}),
-												/* @__PURE__ */ b(g, { className: "mb-1.5 h-4 w-4 shrink-0 text-text-tertiary" }),
-												/* @__PURE__ */ x("div", {
+												/* @__PURE__ */ x(_, { className: "mb-1.5 h-4 w-4 shrink-0 text-text-tertiary" }),
+												/* @__PURE__ */ S("div", {
 													className: "min-w-0",
-													children: [/* @__PURE__ */ b("p", {
+													children: [/* @__PURE__ */ x("p", {
 														className: "mb-1 text-xs font-semibold uppercase tracking-wide text-text-muted",
-														children: O("adaptercloud.drift.observed", "Observed")
-													}), /* @__PURE__ */ b("span", {
+														children: k("adaptercloud.drift.observed", "Observed")
+													}), /* @__PURE__ */ x("span", {
 														className: "inline-block max-w-full break-all rounded-md bg-status-success-bg-subtle px-2.5 py-1 font-mono text-xs text-status-success-text",
-														children: T(e.observedValue)
+														children: E(e.observedValue)
 													})]
 												})
 											]
-										}) : /* @__PURE__ */ x("div", {
+										}) : /* @__PURE__ */ S("div", {
 											className: "mt-3 grid grid-cols-1 gap-3 sm:grid-cols-2",
-											children: [/* @__PURE__ */ x("div", {
+											children: [/* @__PURE__ */ S("div", {
 												className: "rounded-lg bg-bg-sunken p-3",
-												children: [/* @__PURE__ */ b("p", {
+												children: [/* @__PURE__ */ x("p", {
 													className: "mb-1 text-xs font-semibold text-text-secondary",
-													children: O("adaptercloud.drift.expected", "Expected")
-												}), /* @__PURE__ */ b("pre", {
+													children: k("adaptercloud.drift.expected", "Expected")
+												}), /* @__PURE__ */ x("pre", {
 													className: "overflow-auto text-xs text-status-error-text",
 													children: JSON.stringify(e.expectedValue, null, 2)
 												})]
-											}), /* @__PURE__ */ x("div", {
+											}), /* @__PURE__ */ S("div", {
 												className: "rounded-lg bg-bg-sunken p-3",
-												children: [/* @__PURE__ */ b("p", {
+												children: [/* @__PURE__ */ x("p", {
 													className: "mb-1 text-xs font-semibold text-text-secondary",
-													children: O("adaptercloud.drift.observed", "Observed")
-												}), /* @__PURE__ */ b("pre", {
+													children: k("adaptercloud.drift.observed", "Observed")
+												}), /* @__PURE__ */ x("pre", {
 													className: "overflow-auto text-xs text-status-success-text",
 													children: JSON.stringify(e.observedValue, null, 2)
 												})]
 											})]
 										}),
-										/* @__PURE__ */ x("p", {
+										/* @__PURE__ */ S("p", {
 											className: "mt-2 text-xs text-text-secondary",
 											children: [
-												O("adaptercloud.drift.detected", "Detected"),
+												k("adaptercloud.drift.detected", "Detected"),
 												" ",
-												u(e.detectedAt),
+												d(e.detectedAt),
 												" · ",
-												/* @__PURE__ */ b("button", {
+												/* @__PURE__ */ x("button", {
 													type: "button",
-													onClick: () => E(`/resources/${e.resourceId}`),
+													onClick: () => D(`/resources/${e.resourceId}`),
 													className: "hover:underline",
-													children: O("adaptercloud.drift.viewResource", "View resource")
+													children: k("adaptercloud.drift.viewResource", "View resource")
 												})
 											]
 										})
 									]
-								}), t && /* @__PURE__ */ x("button", {
+								}), t && /* @__PURE__ */ S("button", {
 									type: "button",
-									disabled: V === e.id,
+									disabled: G === e.id,
 									onClick: () => {
-										M(null), P(e);
+										N(null), F(e);
 									},
 									className: "inline-flex shrink-0 items-center gap-1.5 rounded-lg border border-border-subtle px-3 py-1.5 text-xs font-medium text-status-success-text transition-colors hover:bg-status-success-bg-subtle disabled:opacity-50",
-									children: [V === e.id ? /* @__PURE__ */ b(v, { className: "h-3.5 w-3.5 animate-spin" }) : /* @__PURE__ */ b(y, { className: "h-3.5 w-3.5" }), O("adaptercloud.drift.remediate", "Remediate")]
+									children: [G === e.id ? /* @__PURE__ */ x(y, { className: "h-3.5 w-3.5 animate-spin" }) : /* @__PURE__ */ x(b, { className: "h-3.5 w-3.5" }), k("adaptercloud.drift.remediate", "Remediate")]
 								})]
 							})
 						}, e.id);
 					})
 				})
 			}),
-			/* @__PURE__ */ b(d, {
-				open: !!N,
+			/* @__PURE__ */ x(f, {
+				open: !!P,
 				onOpenChange: (e) => {
-					e || P(null);
+					e || F(null);
 				},
-				title: O("adaptercloud.drift.remediateTitle", "Mark this drift remediated?"),
-				description: O("adaptercloud.drift.remediatePrompt", "This records the divergence as remediated. Confirm only if the observed state now matches the desired state."),
-				confirmLabel: O("adaptercloud.drift.remediate", "Remediate"),
-				cancelLabel: O("adaptercloud.common.cancel", "Cancel"),
-				onConfirm: () => N && H(N.id),
-				isPending: !!N && V === N?.id,
+				title: k("adaptercloud.drift.remediateTitle", "Mark this drift remediated?"),
+				description: k("adaptercloud.drift.remediatePrompt", "This records the divergence as remediated. Confirm only if the observed state now matches the desired state."),
+				confirmLabel: k("adaptercloud.drift.remediate", "Remediate"),
+				cancelLabel: k("adaptercloud.common.cancel", "Cancel"),
+				onConfirm: () => P && K(P.id),
+				isPending: !!P && G === P?.id,
 				tone: "primary"
 			})
 		]
 	});
 }
 //#endregion
-export { E as DriftListPage };
+export { D as DriftListPage };
 
 //# sourceMappingURL=DriftListPage.js.map

package/dist/adaptercloud/pages/drift/DriftListPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"DriftListPage.js","names":[],"sources":["../../../../src/adaptercloud/pages/drift/DriftListPage.tsx"],"sourcesContent":["/**\n * Drift Board Page\n * @module adaptercloud/pages/drift\n *\n * Divergences between observed and desired state (`adaListDriftRecords`).\n * Filters by status; each detected/acknowledged record can be remediated via\n * `adaRemediateDrift`.\n */\n\nimport { useState, useCallback, useMemo } from 'react';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { GitCompareArrows, Wrench, Loader2, ArrowRight } from 'lucide-react';\nimport { GlassCard } from '@burdenoff/fe-libs/ui';\nimport { PageLayout } from '../../components/PageLayout';\nimport { StatusBadge } from '../../components/StatusBadge';\nimport { SeverityBadge } from '../../components/SeverityBadge';\nimport { DataState } from '../../components/DataState';\nimport { ConfirmDialog } from '../../components/ConfirmDialog';\nimport { useAdapterCloud } from '../../context/AdapterCloudContext';\nimport { useDriftRecords, useRemediateDrift } from '../../hooks/useAdapterCloudApi';\nimport { driftStatusLabels, severityRank } from '../../utils/domain';\nimport { formatDate } from '../../utils/formatters';\nimport { cn } from '../../utils/cn';\nimport type { AdaDriftRecord, AdaDriftStatus, Json } from '../../types';\n\n/** Summary-chip config — order + tokenized colors for each drift status. */\nconst SUMMARY_CHIPS: { status: AdaDriftStatus; className: string }[] = [\n  { status: 'DETECTED', className: 'bg-status-warning-bg-subtle text-status-warning-text' },\n  { status: 'ACKNOWLEDGED', className: 'bg-accent-blue-subtle text-accent-blue' },\n  { status: 'REMEDIATED', className: 'bg-status-success-bg-subtle text-status-success-text' },\n  { status: 'IGNORED', className: 'bg-bg-sunken text-text-secondary' },\n];\n\n/** A drift value is renderable as a compact diff pill only when it is scalar. */\nfunction isScalar(value: Json): boolean {\n  return value === null || ['string', 'number', 'boolean'].includes(typeof value);\n}\n\n/** Human-readable one-line rendering of a scalar drift value. */\nfunction scalarText(value: Json): string {\n  if (value === null || value === undefined) return '—';\n  if (typeof value === 'string') return value;\n  return JSON.stringify(value);\n}\n\nexport function DriftListPage() {\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<AdaDriftStatus | ''>('DETECTED');\n  const [actionError, setActionError] = useState<string | null>(null);\n  const [confirmTarget, setConfirmTarget] = useState<AdaDriftRecord | null>(null);\n\n  const query = useDriftRecords({ status: status || undefined });\n  const remediate = useRemediateDrift();\n\n  // Estate-wide, all-status fetch feeding the summary strip. When the status\n  // filter is \"All\" this shares a query key with the main list (React Query\n  // dedupes to a single request); otherwise it is one extra cheap fetch.\n  const allDrift = useDriftRecords({});\n  const summaryCounts = useMemo(() => {\n    const counts: Record<AdaDriftStatus, number> = {\n      DETECTED: 0,\n      ACKNOWLEDGED: 0,\n      REMEDIATED: 0,\n      IGNORED: 0,\n    };\n    for (const record of allDrift.data ?? []) counts[record.status] += 1;\n    return counts;\n  }, [allDrift.data]);\n  const hasSummary = (allDrift.data?.length ?? 0) > 0;\n\n  // Note: this severity sort only reorders the current server result set.\n  // adaListDriftRecords returns a single capped array (no pagination), so the\n  // ordering is global across what is loaded, not a partial-page reshuffle.\n  const items = [...(query.data ?? [])].sort(\n    (a, b) => severityRank[b.severity] - severityRank[a.severity]\n  );\n\n  // Per-id pending: React Query exposes the in-flight mutation argument via\n  // `variables`, so only the acted row spins/disables — not the whole list.\n  const pendingId = remediate.isPending ? remediate.variables : undefined;\n\n  const handleRemediate = useCallback(\n    (id: string) => {\n      setActionError(null);\n      remediate.mutate(id, {\n        onSuccess: () => setConfirmTarget(null),\n        onError: (err) =>\n          setActionError(err instanceof Error ? err.message : 'Failed to remediate drift.'),\n      });\n    },\n    [remediate]\n  );\n\n  return (\n    <PageLayout\n      title={t('adaptercloud.drift.title', 'Drift')}\n      description={t(\n        'adaptercloud.drift.subtitle',\n        'Divergences between observed and desired state, surfaced during reconciliation.'\n      )}\n    >\n      {hasSummary && (\n        <div className=\"mb-4 flex flex-wrap gap-2\">\n          {SUMMARY_CHIPS.map((chip) => {\n            const active = status === chip.status;\n            return (\n              <button\n                key={chip.status}\n                type=\"button\"\n                onClick={() => setStatus(active ? '' : chip.status)}\n                aria-pressed={active}\n                className={cn(\n                  'inline-flex items-center gap-2 rounded-full px-3 py-1.5 text-sm font-medium transition-shadow',\n                  chip.className,\n                  active && 'ring-2 ring-inset ring-[var(--color-focus-ring)]'\n                )}\n              >\n                <span className=\"text-base font-semibold tabular-nums\">\n                  {summaryCounts[chip.status]}\n                </span>\n                <span>{driftStatusLabels[chip.status].toLowerCase()}</span>\n              </button>\n            );\n          })}\n        </div>\n      )}\n\n      <div className=\"mb-6 flex flex-wrap gap-3\">\n        <select\n          value={status}\n          onChange={(e) => setStatus(e.target.value as AdaDriftStatus | '')}\n          aria-label={t('adaptercloud.drift.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.drift.allStatuses', 'All statuses')}</option>\n          {(Object.keys(driftStatusLabels) as AdaDriftStatus[]).map((s) => (\n            <option key={s} value={s}>\n              {driftStatusLabels[s]}\n            </option>\n          ))}\n        </select>\n      </div>\n\n      {actionError && (\n        <p\n          role=\"alert\"\n          aria-live=\"polite\"\n          className=\"mb-4 rounded-lg bg-status-error-bg-subtle px-3 py-2 text-sm text-status-error-text\"\n        >\n          {actionError}\n        </p>\n      )}\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.drift.emptyTitle', 'No drift')}\n        emptyDescription={t(\n          'adaptercloud.drift.emptyDescription',\n          'Nothing matches this filter — observed state matches desired state.'\n        )}\n        emptyIcon={<GitCompareArrows className=\"h-10 w-10\" />}\n      >\n        <div className=\"space-y-3\">\n          {items.map((d) => {\n            const canRemediate = d.status === 'DETECTED' || d.status === 'ACKNOWLEDGED';\n            return (\n              <GlassCard key={d.id} className=\"p-5\">\n                <div className=\"flex flex-wrap items-start justify-between gap-3\">\n                  <div className=\"min-w-0 flex-1\">\n                    <div className=\"mb-1.5 flex flex-wrap items-center gap-2\">\n                      <SeverityBadge severity={d.severity} />\n                      <StatusBadge status={d.status} label={driftStatusLabels[d.status]} />\n                    </div>\n                    <p className=\"break-all font-mono text-sm font-medium text-text-primary\">\n                      {d.attributePath}\n                    </p>\n                    {isScalar(d.expectedValue) && isScalar(d.observedValue) ? (\n                      // Compact before → after diff for scalar drifts (the common\n                      // case, e.g. t3.medium → t3.large): expected in red, observed\n                      // in green, mirroring the mock's inline diff pills.\n                      <div className=\"mt-3 flex flex-wrap items-end gap-2\">\n                        <div className=\"min-w-0\">\n                          <p className=\"mb-1 text-xs font-semibold uppercase tracking-wide text-text-muted\">\n                            {t('adaptercloud.drift.expected', 'Expected')}\n                          </p>\n                          <span className=\"inline-block max-w-full break-all rounded-md bg-status-error-bg-subtle px-2.5 py-1 font-mono text-xs text-status-error-text\">\n                            {scalarText(d.expectedValue)}\n                          </span>\n                        </div>\n                        <ArrowRight className=\"mb-1.5 h-4 w-4 shrink-0 text-text-tertiary\" />\n                        <div className=\"min-w-0\">\n                          <p className=\"mb-1 text-xs font-semibold uppercase tracking-wide text-text-muted\">\n                            {t('adaptercloud.drift.observed', 'Observed')}\n                          </p>\n                          <span className=\"inline-block max-w-full break-all rounded-md bg-status-success-bg-subtle px-2.5 py-1 font-mono text-xs text-status-success-text\">\n                            {scalarText(d.observedValue)}\n                          </span>\n                        </div>\n                      </div>\n                    ) : (\n                      // Structured (object/array) drift — keep the full JSON blocks.\n                      <div className=\"mt-3 grid grid-cols-1 gap-3 sm:grid-cols-2\">\n                        <div className=\"rounded-lg bg-bg-sunken p-3\">\n                          <p className=\"mb-1 text-xs font-semibold text-text-secondary\">\n                            {t('adaptercloud.drift.expected', 'Expected')}\n                          </p>\n                          <pre className=\"overflow-auto text-xs text-status-error-text\">\n                            {JSON.stringify(d.expectedValue, null, 2)}\n                          </pre>\n                        </div>\n                        <div className=\"rounded-lg bg-bg-sunken p-3\">\n                          <p className=\"mb-1 text-xs font-semibold text-text-secondary\">\n                            {t('adaptercloud.drift.observed', 'Observed')}\n                          </p>\n                          <pre className=\"overflow-auto text-xs text-status-success-text\">\n                            {JSON.stringify(d.observedValue, null, 2)}\n                          </pre>\n                        </div>\n                      </div>\n                    )}\n                    <p className=\"mt-2 text-xs text-text-secondary\">\n                      {t('adaptercloud.drift.detected', 'Detected')} {formatDate(d.detectedAt)}\n                      {' · '}\n                      <button\n                        type=\"button\"\n                        onClick={() => navigateTo(`/resources/${d.resourceId}`)}\n                        className=\"hover:underline\"\n                      >\n                        {t('adaptercloud.drift.viewResource', 'View resource')}\n                      </button>\n                    </p>\n                  </div>\n\n                  {canRemediate && (\n                    <button\n                      type=\"button\"\n                      disabled={pendingId === d.id}\n                      onClick={() => {\n                        setActionError(null);\n                        setConfirmTarget(d);\n                      }}\n                      className=\"inline-flex shrink-0 items-center gap-1.5 rounded-lg border border-border-subtle px-3 py-1.5 text-xs font-medium text-status-success-text transition-colors hover:bg-status-success-bg-subtle disabled:opacity-50\"\n                    >\n                      {pendingId === d.id ? (\n                        <Loader2 className=\"h-3.5 w-3.5 animate-spin\" />\n                      ) : (\n                        <Wrench className=\"h-3.5 w-3.5\" />\n                      )}\n                      {t('adaptercloud.drift.remediate', 'Remediate')}\n                    </button>\n                  )}\n                </div>\n              </GlassCard>\n            );\n          })}\n        </div>\n      </DataState>\n\n      <ConfirmDialog\n        open={Boolean(confirmTarget)}\n        onOpenChange={(open) => {\n          if (!open) setConfirmTarget(null);\n        }}\n        title={t('adaptercloud.drift.remediateTitle', 'Mark this drift remediated?')}\n        description={t(\n          'adaptercloud.drift.remediatePrompt',\n          'This records the divergence as remediated. Confirm only if the observed state now matches the desired state.'\n        )}\n        confirmLabel={t('adaptercloud.drift.remediate', 'Remediate')}\n        cancelLabel={t('adaptercloud.common.cancel', 'Cancel')}\n        onConfirm={() => confirmTarget && handleRemediate(confirmTarget.id)}\n        isPending={Boolean(confirmTarget) && pendingId === confirmTarget?.id}\n        tone=\"primary\"\n      />\n    </PageLayout>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"DriftListPage.js","names":[],"sources":["../../../../src/adaptercloud/pages/drift/DriftListPage.tsx"],"sourcesContent":["/**\n * Drift Board Page\n * @module adaptercloud/pages/drift\n *\n * Divergences between observed and desired state (`adaListDriftRecords`).\n * Filters by status; each detected/acknowledged record can be remediated via\n * `adaRemediateDrift`.\n */\n\nimport { useState, useCallback, useMemo } from 'react';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { GitCompareArrows, Wrench, Loader2, ArrowRight } from 'lucide-react';\nimport { GlassCard } from '@burdenoff/fe-libs/ui';\nimport { PageLayout } from '../../components/PageLayout';\nimport { StatusBadge } from '../../components/StatusBadge';\nimport { SeverityBadge } from '../../components/SeverityBadge';\nimport { DataState } from '../../components/DataState';\nimport { ConfirmDialog } from '../../components/ConfirmDialog';\nimport { useAdapterCloud } from '../../context/AdapterCloudContext';\nimport { useDriftCount, useDriftRecords, useRemediateDrift } from '../../hooks/useAdapterCloudApi';\nimport { driftStatusLabels, severityRank } from '../../utils/domain';\nimport { formatDate } from '../../utils/formatters';\nimport { cn } from '../../utils/cn';\nimport type { AdaDriftRecord, AdaDriftStatus, Json } from '../../types';\n\n/** Summary-chip config — order + tokenized colors for each drift status. */\nconst SUMMARY_CHIPS: { status: AdaDriftStatus; className: string }[] = [\n  { status: 'DETECTED', className: 'bg-status-warning-bg-subtle text-status-warning-text' },\n  { status: 'ACKNOWLEDGED', className: 'bg-accent-blue-subtle text-accent-blue' },\n  { status: 'REMEDIATED', className: 'bg-status-success-bg-subtle text-status-success-text' },\n  { status: 'IGNORED', className: 'bg-bg-sunken text-text-secondary' },\n];\n\n/** A drift value is renderable as a compact diff pill only when it is scalar. */\nfunction isScalar(value: Json): boolean {\n  return value === null || ['string', 'number', 'boolean'].includes(typeof value);\n}\n\n/** Human-readable one-line rendering of a scalar drift value. */\nfunction scalarText(value: Json): string {\n  if (value === null || value === undefined) return '—';\n  if (typeof value === 'string') return value;\n  return JSON.stringify(value);\n}\n\nexport function DriftListPage() {\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<AdaDriftStatus | ''>('DETECTED');\n  const [actionError, setActionError] = useState<string | null>(null);\n  const [confirmTarget, setConfirmTarget] = useState<AdaDriftRecord | null>(null);\n\n  const query = useDriftRecords({ status: status || undefined });\n  const remediate = useRemediateDrift();\n\n  // Summary strip. Each chip reads the estate-wide `pageInfo.totalCount` for\n  // its status via a `limit: 1` query, so the numbers stay exact past the\n  // service's 100-row page ceiling — counting the loaded list would plateau\n  // there and quietly understate a large estate.\n  const detectedCount = useDriftCount('DETECTED');\n  const acknowledgedCount = useDriftCount('ACKNOWLEDGED');\n  const remediatedCount = useDriftCount('REMEDIATED');\n  const ignoredCount = useDriftCount('IGNORED');\n\n  const summaryCounts = useMemo<Record<AdaDriftStatus, number | null>>(\n    () => ({\n      DETECTED: detectedCount.data ?? null,\n      ACKNOWLEDGED: acknowledgedCount.data ?? null,\n      REMEDIATED: remediatedCount.data ?? null,\n      IGNORED: ignoredCount.data ?? null,\n    }),\n    [detectedCount.data, acknowledgedCount.data, remediatedCount.data, ignoredCount.data]\n  );\n\n  // Show the strip only once at least one exact count has arrived and the\n  // estate actually has drift — never render a row of unknown dashes.\n  const hasSummary = Object.values(summaryCounts).some((count) => count != null && count > 0);\n\n  // Note: this severity sort only reorders the current server result set.\n  // adaListDriftRecords returns a single capped array (no pagination), so the\n  // ordering is global across what is loaded, not a partial-page reshuffle.\n  const items = [...(query.data ?? [])].sort(\n    (a, b) => severityRank[b.severity] - severityRank[a.severity]\n  );\n\n  // Per-id pending: React Query exposes the in-flight mutation argument via\n  // `variables`, so only the acted row spins/disables — not the whole list.\n  const pendingId = remediate.isPending ? remediate.variables : undefined;\n\n  const handleRemediate = useCallback(\n    (id: string) => {\n      setActionError(null);\n      remediate.mutate(id, {\n        onSuccess: () => setConfirmTarget(null),\n        onError: (err) =>\n          setActionError(err instanceof Error ? err.message : 'Failed to remediate drift.'),\n      });\n    },\n    [remediate]\n  );\n\n  return (\n    <PageLayout\n      title={t('adaptercloud.drift.title', 'Drift')}\n      description={t(\n        'adaptercloud.drift.subtitle',\n        'Divergences between observed and desired state, surfaced during reconciliation.'\n      )}\n    >\n      {hasSummary && (\n        <div className=\"mb-4 flex flex-wrap gap-2\">\n          {SUMMARY_CHIPS.map((chip) => {\n            const active = status === chip.status;\n            return (\n              <button\n                key={chip.status}\n                type=\"button\"\n                onClick={() => setStatus(active ? '' : chip.status)}\n                aria-pressed={active}\n                className={cn(\n                  'inline-flex items-center gap-2 rounded-full px-3 py-1.5 text-sm font-medium transition-shadow',\n                  chip.className,\n                  active && 'ring-2 ring-inset ring-[var(--color-focus-ring)]'\n                )}\n              >\n                <span className=\"text-base font-semibold tabular-nums\">\n                  {summaryCounts[chip.status] ?? '—'}\n                </span>\n                <span>{driftStatusLabels[chip.status].toLowerCase()}</span>\n              </button>\n            );\n          })}\n        </div>\n      )}\n\n      <div className=\"mb-6 flex flex-wrap gap-3\">\n        <select\n          value={status}\n          onChange={(e) => setStatus(e.target.value as AdaDriftStatus | '')}\n          aria-label={t('adaptercloud.drift.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.drift.allStatuses', 'All statuses')}</option>\n          {(Object.keys(driftStatusLabels) as AdaDriftStatus[]).map((s) => (\n            <option key={s} value={s}>\n              {driftStatusLabels[s]}\n            </option>\n          ))}\n        </select>\n      </div>\n\n      {actionError && (\n        <p\n          role=\"alert\"\n          aria-live=\"polite\"\n          className=\"mb-4 rounded-lg bg-status-error-bg-subtle px-3 py-2 text-sm text-status-error-text\"\n        >\n          {actionError}\n        </p>\n      )}\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.drift.emptyTitle', 'No drift')}\n        emptyDescription={t(\n          'adaptercloud.drift.emptyDescription',\n          'Nothing matches this filter — observed state matches desired state.'\n        )}\n        emptyIcon={<GitCompareArrows className=\"h-10 w-10\" />}\n      >\n        <div className=\"space-y-3\">\n          {items.map((d) => {\n            const canRemediate = d.status === 'DETECTED' || d.status === 'ACKNOWLEDGED';\n            return (\n              <GlassCard key={d.id} className=\"p-5\">\n                <div className=\"flex flex-wrap items-start justify-between gap-3\">\n                  <div className=\"min-w-0 flex-1\">\n                    <div className=\"mb-1.5 flex flex-wrap items-center gap-2\">\n                      <SeverityBadge severity={d.severity} />\n                      <StatusBadge status={d.status} label={driftStatusLabels[d.status]} />\n                    </div>\n                    <p className=\"break-all font-mono text-sm font-medium text-text-primary\">\n                      {d.attributePath}\n                    </p>\n                    {isScalar(d.expectedValue) && isScalar(d.observedValue) ? (\n                      // Compact before → after diff for scalar drifts (the common\n                      // case, e.g. t3.medium → t3.large): expected in red, observed\n                      // in green, mirroring the mock's inline diff pills.\n                      <div className=\"mt-3 flex flex-wrap items-end gap-2\">\n                        <div className=\"min-w-0\">\n                          <p className=\"mb-1 text-xs font-semibold uppercase tracking-wide text-text-muted\">\n                            {t('adaptercloud.drift.expected', 'Expected')}\n                          </p>\n                          <span className=\"inline-block max-w-full break-all rounded-md bg-status-error-bg-subtle px-2.5 py-1 font-mono text-xs text-status-error-text\">\n                            {scalarText(d.expectedValue)}\n                          </span>\n                        </div>\n                        <ArrowRight className=\"mb-1.5 h-4 w-4 shrink-0 text-text-tertiary\" />\n                        <div className=\"min-w-0\">\n                          <p className=\"mb-1 text-xs font-semibold uppercase tracking-wide text-text-muted\">\n                            {t('adaptercloud.drift.observed', 'Observed')}\n                          </p>\n                          <span className=\"inline-block max-w-full break-all rounded-md bg-status-success-bg-subtle px-2.5 py-1 font-mono text-xs text-status-success-text\">\n                            {scalarText(d.observedValue)}\n                          </span>\n                        </div>\n                      </div>\n                    ) : (\n                      // Structured (object/array) drift — keep the full JSON blocks.\n                      <div className=\"mt-3 grid grid-cols-1 gap-3 sm:grid-cols-2\">\n                        <div className=\"rounded-lg bg-bg-sunken p-3\">\n                          <p className=\"mb-1 text-xs font-semibold text-text-secondary\">\n                            {t('adaptercloud.drift.expected', 'Expected')}\n                          </p>\n                          <pre className=\"overflow-auto text-xs text-status-error-text\">\n                            {JSON.stringify(d.expectedValue, null, 2)}\n                          </pre>\n                        </div>\n                        <div className=\"rounded-lg bg-bg-sunken p-3\">\n                          <p className=\"mb-1 text-xs font-semibold text-text-secondary\">\n                            {t('adaptercloud.drift.observed', 'Observed')}\n                          </p>\n                          <pre className=\"overflow-auto text-xs text-status-success-text\">\n                            {JSON.stringify(d.observedValue, null, 2)}\n                          </pre>\n                        </div>\n                      </div>\n                    )}\n                    <p className=\"mt-2 text-xs text-text-secondary\">\n                      {t('adaptercloud.drift.detected', 'Detected')} {formatDate(d.detectedAt)}\n                      {' · '}\n                      <button\n                        type=\"button\"\n                        onClick={() => navigateTo(`/resources/${d.resourceId}`)}\n                        className=\"hover:underline\"\n                      >\n                        {t('adaptercloud.drift.viewResource', 'View resource')}\n                      </button>\n                    </p>\n                  </div>\n\n                  {canRemediate && (\n                    <button\n                      type=\"button\"\n                      disabled={pendingId === d.id}\n                      onClick={() => {\n                        setActionError(null);\n                        setConfirmTarget(d);\n                      }}\n                      className=\"inline-flex shrink-0 items-center gap-1.5 rounded-lg border border-border-subtle px-3 py-1.5 text-xs font-medium text-status-success-text transition-colors hover:bg-status-success-bg-subtle disabled:opacity-50\"\n                    >\n                      {pendingId === d.id ? (\n                        <Loader2 className=\"h-3.5 w-3.5 animate-spin\" />\n                      ) : (\n                        <Wrench className=\"h-3.5 w-3.5\" />\n                      )}\n                      {t('adaptercloud.drift.remediate', 'Remediate')}\n                    </button>\n                  )}\n                </div>\n              </GlassCard>\n            );\n          })}\n        </div>\n      </DataState>\n\n      <ConfirmDialog\n        open={Boolean(confirmTarget)}\n        onOpenChange={(open) => {\n          if (!open) setConfirmTarget(null);\n        }}\n        title={t('adaptercloud.drift.remediateTitle', 'Mark this drift remediated?')}\n        description={t(\n          'adaptercloud.drift.remediatePrompt',\n          'This records the divergence as remediated. Confirm only if the observed state now matches the desired state.'\n        )}\n        confirmLabel={t('adaptercloud.drift.remediate', 'Remediate')}\n        cancelLabel={t('adaptercloud.common.cancel', 'Cancel')}\n        onConfirm={() => confirmTarget && handleRemediate(confirmTarget.id)}\n        isPending={Boolean(confirmTarget) && pendingId === confirmTarget?.id}\n        tone=\"primary\"\n      />\n    </PageLayout>\n  );\n}\n"],"mappings":"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"}

package/dist/adaptercloud/pages/policies/PoliciesListPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PoliciesListPage.d.ts","sourceRoot":"","sources":["../../../../src/adaptercloud/pages/policies/PoliciesListPage.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAsEH,wBAAgB,gBAAgB,gCAoQ/B"}
+{"version":3,"file":"PoliciesListPage.d.ts","sourceRoot":"","sources":["../../../../src/adaptercloud/pages/policies/PoliciesListPage.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAsGH,wBAAgB,gBAAgB,gCAqP/B"}