@zaip-ai/cli 2.2.0 → 3.0.0

package/templates/.agents/dashboard/apps/frontend/src/use-snapshot-notice.tsx

@@ -0,0 +1,49 @@
+import type { CostLocale } from "@zaip-ai/dashboard-cost-monitor/react";
+import { useEffect, useState } from "react";
+import { shouldShowSnapshotNotice, snapshotNoticeDelayMs } from "./snapshot-notice.js";
+export function useSnapshotNotice(
+  snapshotUpdating: boolean,
+  initialDataPending: boolean,
+  costLocale: CostLocale,
+) {
+  const [snapshotNoticeDismissed, setSnapshotNoticeDismissed] = useState(false);
+  const [snapshotNoticeDelayElapsed, setSnapshotNoticeDelayElapsed] = useState(false);
+  useEffect(() => {
+    if (!snapshotUpdating || !initialDataPending || snapshotNoticeDismissed) {
+      setSnapshotNoticeDelayElapsed(false);
+      return undefined;
+    }
+    const timeout = window.setTimeout(
+      () => setSnapshotNoticeDelayElapsed(true),
+      snapshotNoticeDelayMs,
+    );
+    return () => window.clearTimeout(timeout);
+  }, [initialDataPending, snapshotNoticeDismissed, snapshotUpdating]);
+  const snapshotNoticeVisible = shouldShowSnapshotNotice({
+    snapshotUpdating,
+    initialDataPending,
+    dismissed: snapshotNoticeDismissed,
+    delayElapsed: snapshotNoticeDelayElapsed,
+  });
+  const snapshotNotice = snapshotNoticeVisible ? (
+    <div aria-live="polite" className="app-notice app-snapshot-status" role="status">
+      <span>
+        Exibindo o último snapshot local validado. Os dados canônicos estão sendo atualizados em
+        segundo plano e estarão atuais na próxima abertura.
+      </span>
+      <button
+        aria-label={
+          costLocale === "pt-BR"
+            ? "Fechar aviso de atualização do snapshot"
+            : "Dismiss snapshot update notice"
+        }
+        onClick={() => setSnapshotNoticeDismissed(true)}
+        type="button"
+      >
+        ×
+      </button>
+    </div>
+  ) : null;
+
+  return snapshotNotice;
+}

package/templates/.agents/dashboard/modules/cost-monitor/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zaip-ai/dashboard-cost-monitor",
-  "version": "2.2.0",
+  "version": "3.0.0",
   "private": true,
   "type": "module",
   "exports": {

package/templates/.agents/dashboard/modules/cost-monitor/src/complete-cost-average.test.ts

@@ -0,0 +1,73 @@
+import type { OperationsProjection } from "@zaip-ai/dashboard-operations/contracts";
+import { describe, expect, it } from "vitest";
+import { averageCompleteCost } from "./contracts.js";
+import { buildCostSummaryProjection } from "./server/build-cost-summary-projection.js";
+
+describe("population cost averages", () => {
+  it.each([
+    { unknown: 1, total: 10, expected: null },
+    { unknown: 1, total: 0, expected: null },
+    { unknown: 0, total: 0, expected: 0 },
+    { unknown: 0, total: 10, expected: 5 },
+  ])("summary retains subtotal but not diluted mean: $unknown/$total", ({
+    unknown,
+    total,
+    expected,
+  }) => {
+    const operations = {
+      schema_version: 2,
+      layout_version: 3,
+      readonly: true,
+      source: ".agents/records",
+      filters: { from: null, to: null },
+      summary: { task_count: 1, overview_metrics: {}, usage: {} },
+      prds: [],
+      specs: [],
+      runs: [],
+    } as unknown as OperationsProjection;
+    const cost = {
+      known_sum: total,
+      unknown,
+      complete: unknown === 0,
+      coverage_ratio: (2 - unknown) / 2,
+      currency: "BRL",
+    };
+    const projection = buildCostSummaryProjection(
+      {
+        periods: {
+          daily: {
+            "2026-08-19": {
+              prds: 0,
+              specs: 0,
+              tasks: 1,
+              validations: 0,
+              evidences: 0,
+              runs: 2,
+              usage: {
+                total_tokens: { known_sum: 100, unknown: 0, complete: true, coverage_ratio: 1 },
+                cost,
+              },
+            },
+          },
+        },
+        cost_monitor_daily_duration: {},
+        daily_rows: [{ key: "2026-08-19", total_cost_usd: total, total_cost_brl: total }],
+      },
+      operations,
+      "BRL",
+      null,
+    );
+    expect(projection.overview.estimated_brl).toBe(total);
+    expect(projection.overview.average_run_cost_brl).toBe(expected);
+  });
+  it.each([
+    { values: [], expected: null },
+    { values: [null], expected: null },
+    { values: [10, null], expected: null },
+    { values: [0, null], expected: null },
+    { values: [0, 0], expected: 0 },
+    { values: [10, 20], expected: 15 },
+  ])("preserves completeness: $values", ({ values, expected }) => {
+    expect(averageCompleteCost(values)).toBe(expected);
+  });
+});

package/templates/.agents/dashboard/modules/cost-monitor/src/contracts.ts

@@ -1,4 +1,7 @@
 import type { ReadonlyV2Projection } from "@zaip-ai/dashboard-contracts";
+
+export type { CostPeriodAverages } from "./period-averages.js";
+
 import type {
   MacroProjection,
   ProjectionTimeFilter,
@@ -22,6 +25,12 @@ export interface DurationCoverage {
 export type DurationAggregationScope = "root_execution" | "all_execution" | "all_invocations";
 
 /** Returns the sum of reported values; missing telemetry does not erase known usage. */
+/** A population average must not treat missing Run costs as observed zero. */
+export function averageCompleteCost(values: readonly (number | null)[]): number | null {
+  if (values.length === 0 || values.some((value) => value === null)) return null;
+  return values.reduce<number>((total, value) => total + (value ?? 0), 0) / values.length;
+}
+
 export function sumKnown(values: readonly (number | null)[]): number | null {
   const known = values.filter((value): value is number => value !== null);
   return known.length === 0 ? null : known.reduce((sum, value) => sum + value, 0);

package/templates/.agents/dashboard/modules/cost-monitor/src/period-averages.ts

@@ -0,0 +1,60 @@
+import type { CostGroupRow } from "./contracts.js";
+
+export interface CostPeriodAverages {
+  tasks: number | null;
+  specs: number | null;
+  prds: number | null;
+  durationMs: number | null;
+  tokens: number | null;
+  cost: number | null;
+}
+
+export function summarizeCostPeriodAverages(
+  rows: readonly Pick<
+    CostGroupRow,
+    | "task_count"
+    | "spec_count"
+    | "prd_count"
+    | "duration_ms"
+    | "total_tokens"
+    | "estimated_usd"
+    | "estimated_brl"
+  >[],
+  currency: "BRL" | "USD",
+): CostPeriodAverages {
+  const divisor = rows.length;
+  return {
+    tasks: averagePerPeriod(
+      rows.map((row) => row.task_count),
+      divisor,
+    ),
+    specs: averagePerPeriod(
+      rows.map((row) => row.spec_count),
+      divisor,
+    ),
+    prds: averagePerPeriod(
+      rows.map((row) => row.prd_count),
+      divisor,
+    ),
+    durationMs: averagePerPeriod(
+      rows.map((row) => row.duration_ms),
+      divisor,
+    ),
+    tokens: averageObserved(rows.map((row) => row.total_tokens)),
+    cost: averageObserved(
+      rows.map((row) => (currency === "BRL" ? row.estimated_brl : row.estimated_usd)),
+    ),
+  };
+}
+
+function averageObserved(values: readonly (number | null)[]): number | null {
+  const present = values.filter((value): value is number => value !== null);
+  return present.length === 0
+    ? null
+    : present.reduce((sum, value) => sum + value, 0) / present.length;
+}
+
+function averagePerPeriod(values: readonly (number | null)[], periodCount: number): number | null {
+  if (periodCount === 0 || values.every((value) => value === null)) return null;
+  return values.reduce<number>((sum, value) => sum + (value ?? 0), 0) / periodCount;
+}

package/templates/.agents/dashboard/modules/cost-monitor/src/react/CostDeveloperPanelSlot.tsx

@@ -0,0 +1,16 @@
+import { CostDeveloperAttributionPanel } from "./CostDeveloperAttributionPanel.js";
+import type { CostLocale } from "./cost-monitor-copy.js";
+import type { CostView } from "./cost-monitor-views.js";
+export function CostDeveloperPanelSlot({
+  locale,
+  range,
+  view,
+}: {
+  locale: CostLocale;
+  range: { from: string; to: string } | undefined;
+  view: CostView;
+}) {
+  return view === "developers" ? (
+    <CostDeveloperAttributionPanel locale={locale} {...(range === undefined ? {} : range)} />
+  ) : null;
+}

package/templates/.agents/dashboard/modules/cost-monitor/src/react/CostGroupsTable.tsx

@@ -0,0 +1,459 @@
+import { DataTable } from "@zaip-ai/dashboard-ui";
+import type { CostGroupRow, DurationCoverage } from "../contracts.js";
+import { MoreVerticalIcon } from "./CostTableIcons.js";
+import { costPeriodHeading } from "./CostTables.js";
+import type { CostCurrency, CostLocale } from "./cost-monitor-copy.js";
+import { localizedDescription, sumNumbers } from "./cost-table-metrics.js";
+import {
+  costGroupsScrollLabel,
+  costPeriodTotalAriaLabel,
+  formatCostPeriodLabel,
+  formatDateTime,
+} from "./cost-table-presentation.js";
+import type { CostGroupTotals } from "./use-cost-group-page.js";
+
+export {
+  type CostDeveloperAttributionRow,
+  CostDeveloperAttributionTable,
+} from "./CostDeveloperAttributionTable.js";
+export { CostModelsAuditTable } from "./CostModelsAuditTable.js";
+
+export {
+  agentRunModelPresentation,
+  contextUpliftUsd,
+  hasCollectedUsage,
+  isDisplayableModel,
+  localizedDescription,
+  ratio,
+  scenario,
+  sumNumbers,
+} from "./cost-table-metrics.js";
+export {
+  costGroupsScrollLabel,
+  costPeriodTotalAriaLabel,
+  costRunsDurationTotal,
+  costRunsScrollLabel,
+  formatBrlRate,
+  formatCostPeriodLabel,
+  formatDateTime,
+  formatMultiplierPair,
+  formatRate,
+  formatReasoningEffort,
+  formatServiceTier,
+  formatUsd,
+  isCompactRunColumnVisible,
+} from "./cost-table-presentation.js";
+
+import {
+  displayCostGroupLabel,
+  formatAuditableCompactNumber,
+  formatAuditableCurrency,
+  formatDurationCoverage,
+  formatFactualCount,
+  hasKnownDuration,
+  sortCostValue,
+} from "./cost-table-formatters.js";
+
+export {
+  costRunsFooterLabel,
+  displayCostGroupLabel,
+  formatAuditableCompactNumber,
+  formatAuditableCurrency,
+  formatAuditableDuration,
+  formatAuditableNumber,
+  formatDurationCoverage,
+  formatTokenBackedDuration,
+  hasKnownDuration,
+  runOriginBadge,
+  sortCostValue,
+} from "./cost-table-formatters.js";
+
+export function CostGroupsTable({
+  rows,
+  currency,
+  locale,
+  onOpenTrace,
+  period,
+  showDateTime = true,
+  showAgentIdentity = false,
+  showInvocationTasks = false,
+  showModelLifecycleDetails = false,
+  dateHeading,
+  labelHeading,
+  totals: suppliedTotals,
+  loading = false,
+}: {
+  rows: readonly CostGroupRow[];
+  currency: CostCurrency;
+  locale: CostLocale;
+  onOpenTrace?: (taskId: string) => void;
+  period?: "daily" | "monthly" | "annual";
+  showDateTime?: boolean;
+  showAgentIdentity?: boolean;
+  showInvocationTasks?: boolean;
+  showModelLifecycleDetails?: boolean;
+  dateHeading?: string;
+  labelHeading?: string;
+  totals?: CostGroupTotals;
+  loading?: boolean;
+}) {
+  const displayCount = (value: number | null) =>
+    formatFactualCount(
+      showAgentIdentity || showModelLifecycleDetails ? (value ?? 0) : value,
+      locale,
+    );
+  const displayDuration = (value: DurationCoverage) =>
+    (showAgentIdentity || showModelLifecycleDetails) && value.known_sum <= 0
+      ? "0"
+      : formatDurationCoverage(value, locale);
+  const displayCurrency = (value: number | null) =>
+    formatAuditableCurrency(
+      showAgentIdentity || showModelLifecycleDetails ? (value ?? 0) : value,
+      currency,
+      locale,
+    );
+  const conversationCount = (row: unknown): number | null =>
+    (row as { conversation_count?: number | null }).conversation_count ?? null;
+  const pageTotals = {
+    runs: rows.reduce((sum, row) => sum + row.run_count, 0),
+    tasks: sumNumbers(rows.map((row) => row.task_count)),
+    prds: sumNumbers(rows.map((row) => row.prd_count)),
+    specs: sumNumbers(rows.map((row) => row.spec_count)),
+    evidences: sumNumbers(rows.map((row) => row.evidence_count)),
+    tests: sumNumbers(rows.map((row) => row.test_count)),
+    conversations: sumNumbers(rows.map(conversationCount)),
+    durationKnownMs: rows.reduce((sum, row) => sum + row.duration.known_sum, 0),
+    durationPartial: rows.some((row) => !row.duration.complete),
+    tokens: sumNumbers(rows.map((row) => row.total_tokens)),
+    usd: sumNumbers(rows.map((row) => row.estimated_usd)),
+    brl: sumNumbers(rows.map((row) => row.estimated_brl)),
+  };
+  const totals =
+    suppliedTotals === undefined
+      ? pageTotals
+      : {
+          runs: suppliedTotals.run_count,
+          tasks: suppliedTotals.task_count,
+          prds: suppliedTotals.prd_count,
+          specs: suppliedTotals.spec_count,
+          evidences: suppliedTotals.evidence_count,
+          tests: suppliedTotals.test_count,
+          conversations: conversationCount(suppliedTotals) ?? pageTotals.conversations,
+          durationKnownMs: suppliedTotals.duration.known_sum,
+          durationPartial: !suppliedTotals.duration.complete,
+          tokens: suppliedTotals.total_tokens,
+          usd: suppliedTotals.estimated_usd,
+          brl: suppliedTotals.estimated_brl,
+        };
+  const totalDurationDisplay = displayDuration(
+    suppliedTotals?.duration ?? {
+      known_sum: totals.durationKnownMs,
+      unknown: totals.durationPartial ? 1 : 0,
+      complete: !totals.durationPartial,
+      // Group-level coverage is intentionally preserved separately from the
+      // factual known sum. Individual rows retain their original provenance.
+      coverage_ratio: totals.durationPartial ? 0 : 1,
+    },
+  );
+  const totalTokensDisplay = formatAuditableCompactNumber(
+    showModelLifecycleDetails ? (totals.tokens ?? 0) : totals.tokens,
+    locale,
+  );
+  const totalCostDisplay = displayCurrency(currency === "BRL" ? totals.brl : totals.usd);
+  const totalAriaLabel = costPeriodTotalAriaLabel({
+    locale,
+    duration: totalDurationDisplay,
+    tokens: totalTokensDisplay,
+    cost: totalCostDisplay,
+    currency,
+  });
+  const totalLabel = locale === "pt-BR" ? "Total geral" : "Grand total";
+  return (
+    <DataTable
+      columns={[
+        {
+          key: "latestStartedAt",
+          label: dateHeading ?? (locale === "pt-BR" ? "Data e hora" : "Date and time"),
+          render: (row) => formatDateTime(row.latest_started_at, locale),
+          hidden: !showDateTime,
+          footer: showDateTime ? <output aria-label={totalLabel}>Total</output> : undefined,
+        },
+        ...(showAgentIdentity
+          ? [
+              {
+                key: "persona",
+                label: locale === "pt-BR" ? "Persona" : "Persona",
+                render: (row: CostGroupRow) => row.persona ?? "",
+              },
+              {
+                key: "job",
+                label: locale === "pt-BR" ? "Cargo" : "Job",
+                render: (row: CostGroupRow) => row.job ?? "",
+              },
+            ]
+          : []),
+        {
+          key: "label",
+          label:
+            period === undefined
+              ? (labelHeading ?? (locale === "pt-BR" ? "Grupo" : "Group"))
+              : costPeriodHeading(period, locale),
+          render: (row) => {
+            if (period !== undefined) {
+              return <strong>{formatCostPeriodLabel(row.key, period, locale)}</strong>;
+            }
+            const displayLabel = displayCostGroupLabel(row.label, locale);
+            const unavailableLabel = displayLabel !== row.label;
+            return (
+              <>
+                <strong>{displayLabel}</strong>
+                {unavailableLabel || row.key === row.label ? null : <small>{row.key}</small>}
+              </>
+            );
+          },
+          sortValue: (row) => row.key,
+          footer: showDateTime ? undefined : <output aria-label={totalLabel}>Total</output>,
+        },
+        ...(period === undefined && !showAgentIdentity && !showModelLifecycleDetails
+          ? [
+              {
+                key: "runs",
+                label: locale === "pt-BR" ? "Invocações" : "Agent invocations",
+                render: (row: CostGroupRow) => row.run_count,
+                align: "right" as const,
+                footer: totals.runs,
+              },
+              ...(showAgentIdentity
+                ? []
+                : [
+                    {
+                      key: "tasks",
+                      label:
+                        showAgentIdentity || showInvocationTasks
+                          ? locale === "pt-BR"
+                            ? "Tarefas com invocação"
+                            : "Tasks with invocations"
+                          : locale === "pt-BR"
+                            ? "Tarefas criadas"
+                            : "Tasks created",
+                      render: (row: CostGroupRow) => row.task_count ?? 0,
+                      align: "right" as const,
+                      footer: totals.tasks,
+                    },
+                  ]),
+            ]
+          : [
+              {
+                key: "prds",
+                label: "PRDs",
+                render: (row: CostGroupRow) => displayCount(row.prd_count),
+                sortValue: (row: CostGroupRow) => row.prd_count ?? 0,
+                align: "right" as const,
+                footer: displayCount(totals.prds),
+                description: localizedDescription(
+                  locale,
+                  showAgentIdentity
+                    ? "PRDs com criação atribuída ao agente por Run registrado. Conta apenas vínculos observados, sem duplicar IDs."
+                    : "PRDs criados por vínculo canônico com um único modelo financeiro observado. Sem essa prova, o indicador exibido é 0.",
+                  "PRDs created through a canonical link to one observed financial model. Without that evidence, the displayed indicator is 0.",
+                ),
+              },
+              {
+                key: "specs",
+                label: "SPECs",
+                render: (row: CostGroupRow) => displayCount(row.spec_count),
+                sortValue: (row: CostGroupRow) => row.spec_count ?? 0,
+                align: "right" as const,
+                footer: displayCount(totals.specs),
+                description: localizedDescription(
+                  locale,
+                  showAgentIdentity
+                    ? "SPECs com criação atribuída ao agente por Run registrado. Conta apenas vínculos observados, sem duplicar IDs."
+                    : "SPECs criadas por vínculo canônico com um único modelo financeiro observado. Sem essa prova, o indicador exibido é 0.",
+                  "SPECs created through a canonical link to one observed financial model. Without that evidence, the displayed indicator is 0.",
+                ),
+              },
+              {
+                key: "tasks",
+                label: showAgentIdentity
+                  ? locale === "pt-BR"
+                    ? "Tarefas"
+                    : "Tasks"
+                  : showModelLifecycleDetails
+                    ? "Tasks"
+                    : locale === "pt-BR"
+                      ? "Tarefas criadas"
+                      : "Tasks created",
+                render: (row: CostGroupRow) => displayCount(row.task_count),
+                sortValue: (row: CostGroupRow) => row.task_count ?? 0,
+                align: "right" as const,
+                footer: displayCount(totals.tasks),
+                description: localizedDescription(
+                  locale,
+                  showAgentIdentity
+                    ? "Tasks distintas em que o agente participou no período. Uma Task pode contar em vários agentes; o total soma essas participações entre agentes. Sem participação, mostra 0."
+                    : "Tasks contam apenas quando creation_run_id tem um único modelo financeiro observável. Participação posterior não é criação; ausência ou multi-modelo exibe 0.",
+                  "Tasks count only when creation_run_id has one observed financial model. Later participation is not creation; missing or multi-model linkage displays 0.",
+                ),
+              },
+              ...(showModelLifecycleDetails
+                ? [
+                    {
+                      key: "conversations",
+                      label: "Conversations",
+                      render: (row: CostGroupRow) => displayCount(conversationCount(row)),
+                      sortValue: (row: CostGroupRow) => conversationCount(row) ?? 0,
+                      align: "right" as const,
+                      footer: displayCount(totals.conversations),
+                      description: localizedDescription(
+                        locale,
+                        "Conversas canônicas, incluindo turns unassisted legados. Cada ID conta uma vez por modelo; um modelo múltiplo pode repetir. Run com Task e conversa de origem não cria Task adicional.",
+                        "Canonical conversations, including legacy unassisted turns. Each ID counts once per model; a multi-model conversation may repeat. A Run with a Task and source conversation does not create an additional Task.",
+                      ),
+                    },
+                  ]
+                : []),
+              {
+                key: "runs",
+                label: "Runs",
+                render: (row: CostGroupRow) => row.run_count,
+                sortValue: (row: CostGroupRow) => row.run_count,
+                align: "right" as const,
+                footer: totals.runs,
+                description: localizedDescription(
+                  locale,
+                  showAgentIdentity
+                    ? "Chamadas observadas atribuídas ao agente no período selecionado."
+                    : "Runs financeiros observados neste modelo, sem distribuir ou duplicar custo, tokens e tempo entre modelos.",
+                  "Observed financial Runs for this model, without allocating or duplicating cost, tokens, or time across models.",
+                ),
+              },
+              {
+                key: "tests",
+                label: locale === "pt-BR" ? "Testes" : "Tests",
+                render: (row: CostGroupRow) => displayCount(row.test_count),
+                sortValue: (row: CostGroupRow) => row.test_count ?? 0,
+                align: "right" as const,
+                footer: displayCount(totals.tests),
+                description: localizedDescription(
+                  locale,
+                  showAgentIdentity
+                    ? "Registros de testes distintos vinculados ao Run do agente no período. Revisões e outras validações não são contadas como testes."
+                    : "Validações canônicas cuja artifact_run_id coincide com a Run registradora deste modelo; ausência de prova exibe 0.",
+                  "Canonical validations whose artifact_run_id matches this model's registering Run; missing evidence displays 0.",
+                ),
+              },
+              {
+                key: "evidences",
+                label: locale === "pt-BR" ? "Evidências" : "Evidence",
+                render: (row: CostGroupRow) => displayCount(row.evidence_count),
+                sortValue: (row: CostGroupRow) => row.evidence_count ?? 0,
+                align: "right" as const,
+                footer: displayCount(totals.evidences),
+                description: localizedDescription(
+                  locale,
+                  showAgentIdentity
+                    ? "Evidências distintas vinculadas ao Run do agente no período. Conta apenas vínculos registrados."
+                    : "Evidências canônicas cuja artifact_run_id coincide com a Run registradora deste modelo; o total não duplica a mesma evidência. Sem prova, exibe 0.",
+                  "Canonical evidence whose artifact_run_id matches this model's registering Run; the total does not duplicate the same evidence. Missing proof displays 0.",
+                ),
+              },
+            ]),
+        {
+          key: "duration",
+          label: "Tempo",
+          render: (row) => displayDuration(row.duration),
+          sortValue: (row) =>
+            hasKnownDuration(row.duration)
+              ? row.duration.known_sum
+              : showModelLifecycleDetails
+                ? 0
+                : null,
+          align: "right",
+          footer: <output aria-label={totalAriaLabel}>{totalDurationDisplay}</output>,
+        },
+        {
+          key: "tokens",
+          label: "Tokens",
+          render: (row) =>
+            formatAuditableCompactNumber(
+              showModelLifecycleDetails ? (row.total_tokens ?? 0) : row.total_tokens,
+              locale,
+            ),
+          sortValue: (row) =>
+            showModelLifecycleDetails ? (row.total_tokens ?? 0) : row.total_tokens,
+          align: "right",
+          footer: <output aria-label={totalAriaLabel}>{totalTokensDisplay}</output>,
+        },
+        {
+          key: "cost",
+          label:
+            showAgentIdentity || showModelLifecycleDetails || period !== undefined
+              ? locale === "pt-BR"
+                ? "Custos"
+                : "Costs"
+              : period === undefined
+                ? locale === "pt-BR"
+                  ? "Custo"
+                  : "Cost"
+                : locale === "pt-BR"
+                  ? "Custos"
+                  : "Costs",
+          render: (row) =>
+            displayCurrency(currency === "BRL" ? row.estimated_brl : row.estimated_usd),
+          sortValue: (row) =>
+            showModelLifecycleDetails
+              ? (sortCostValue(currency, row.estimated_brl, row.estimated_usd) ?? 0)
+              : sortCostValue(currency, row.estimated_brl, row.estimated_usd),
+          align: "right",
+          footer: <output aria-label={totalAriaLabel}>{totalCostDisplay}</output>,
+        },
+        ...(onOpenTrace
+          ? [
+              {
+                key: "trace",
+                label: "",
+                render: (row: CostGroupRow) => (
+                  <button
+                    aria-label="Abrir detalhes"
+                    className="cost-row-action"
+                    onClick={(event) => {
+                      event.stopPropagation();
+                      onOpenTrace(row.key);
+                    }}
+                    type="button"
+                  >
+                    <MoreVerticalIcon />
+                  </button>
+                ),
+              },
+            ]
+          : []),
+      ]}
+      defaultSort={
+        showAgentIdentity
+          ? { key: "cost", direction: "desc" }
+          : period === undefined
+            ? null
+            : { key: "label", direction: "desc" }
+      }
+      locale={locale}
+      emptyMessage={
+        loading
+          ? locale === "pt-BR"
+            ? "Carregando…"
+            : "Loading…"
+          : locale === "pt-BR"
+            ? "Nenhum dado disponível."
+            : "No data available."
+      }
+      pageSize={100}
+      rowKey={(row) => row.key}
+      onRowClick={onOpenTrace === undefined ? undefined : (row) => onOpenTrace(row.key)}
+      rows={rows}
+      scrollLabel={costGroupsScrollLabel(locale)}
+      showColumnInfo
+      sortable
+    />
+  );
+}