@zaip-ai/cli 1.0.6 → 1.0.7

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

@@ -0,0 +1,797 @@
+import {
+  DataTable,
+  formatCompactNumber,
+  formatCurrency,
+  formatDurationMs,
+} from "@zaip-ai/dashboard-ui";
+import type { CostGroupRow, CostRunRow, DurationCoverage } from "../contracts.js";
+import { MoreVerticalIcon } from "./CostTableIcons.js";
+import { durationContributors } from "./cost-duration.js";
+import type { CostCurrency, CostLocale } from "./cost-monitor-copy.js";
+import {
+  agentRunModelPresentation,
+  formatApiSpeedScenario,
+  localizedDescription,
+  sumNumbers,
+} from "./cost-table-metrics.js";
+
+export { CostModelsAuditTable } from "./CostModelsAuditTable.js";
+export {
+  agentRunModelPresentation,
+  contextUpliftUsd,
+  hasCollectedUsage,
+  isDisplayableModel,
+  localizedDescription,
+  ratio,
+  scenario,
+  sumNumbers,
+} from "./cost-table-metrics.js";
+
+const unavailableMetricLabels: Readonly<Record<CostLocale, string>> = {
+  "pt-BR": "Indisponível",
+  "en-US": "Unavailable",
+};
+function unavailableMetricLabel(locale: CostLocale): string {
+  return unavailableMetricLabels[locale];
+}
+
+export function formatAuditableNumber(value: number | null, locale: CostLocale): string {
+  if (value === null) return unavailableMetricLabel(locale);
+  return new Intl.NumberFormat(locale, { maximumFractionDigits: 0 }).format(value);
+}
+
+export function formatAuditableCompactNumber(value: number | null, locale: CostLocale): string {
+  return value === null ? unavailableMetricLabel(locale) : formatCompactNumber(value, locale);
+}
+
+export function formatAuditableCurrency(
+  value: number | null,
+  currency: CostCurrency,
+  locale: CostLocale,
+): string {
+  return value === null ? unavailableMetricLabel(locale) : formatCurrency(value, currency, locale);
+}
+
+export function formatAuditableDuration(value: number | null, locale: CostLocale): string {
+  return value === null ? unavailableMetricLabel(locale) : formatDurationMs(value, locale);
+}
+
+export function formatDurationCoverage(value: DurationCoverage, locale: CostLocale): string {
+  if (value.complete || value.coverage_ratio > 0) return formatDurationMs(value.known_sum, locale);
+  return unavailableMetricLabel(locale);
+}
+
+/** Keeps table ordering tied to the raw monetary value, not its localized label. */
+export function sortCostValue(
+  currency: CostCurrency,
+  brl: number | null,
+  usd: number | null,
+): number | null {
+  return currency === "BRL" ? brl : usd;
+}
+
+export function runOriginBadge(row: Pick<CostRunRow, "prd_id" | "spec_id" | "task_id">): {
+  label: "PRD" | "SPEC" | "Tarefa avulsa";
+  tone: "prd" | "spec" | "task";
+} {
+  if (row.prd_id !== null) return { label: "PRD", tone: "prd" };
+  if (row.spec_id !== null) return { label: "SPEC", tone: "spec" };
+  return { label: "Tarefa avulsa", tone: "task" };
+}
+
+export function CostRunsTable({
+  rows,
+  onOpenRun,
+  currency,
+  locale,
+  compact = false,
+}: {
+  rows: readonly CostRunRow[];
+  onOpenRun: (runId: string) => void;
+  currency: CostCurrency;
+  locale: CostLocale;
+  compact?: boolean;
+}) {
+  const total = (key: keyof CostRunRow) => sumNumbers(rows.map((row) => row[key]));
+  const durationTotal = costRunsDurationTotal(rows);
+  const show = (select: (row: CostRunRow) => number | string | null) =>
+    !compact || isCompactRunColumnVisible(rows, select);
+  return (
+    <DataTable
+      columns={[
+        {
+          key: "startedAt",
+          label: locale === "pt-BR" ? "Data e hora" : "Date and time",
+          render: (row) => formatDateTime(row.started_at, locale),
+          footer: locale === "pt-BR" ? "Total" : "Total",
+        },
+        {
+          key: "run",
+          label: locale === "pt-BR" ? "Invocação" : "Agent invocation",
+          render: (row) => (
+            <>
+              <strong>{row.run_id}</strong>
+              <small>{row.task_title}</small>
+            </>
+          ),
+        },
+        {
+          key: "origin",
+          label: locale === "pt-BR" ? "Origem" : "Origin",
+          render: (row) => {
+            const origin = runOriginBadge(row);
+            return (
+              <span className={`cost-run-origin cost-run-origin-${origin.tone}`}>
+                {origin.label}
+              </span>
+            );
+          },
+        },
+        {
+          key: "duration",
+          label: locale === "pt-BR" ? "Tempo de execução" : "Execution time",
+          render: (row) =>
+            row.duration_provenance === "legacy_inferred" ? (
+              <>
+                <span>{formatAuditableDuration(row.duration_ms, locale)}</span>
+                <small>{locale === "pt-BR" ? "Tempo inferido" : "Inferred time"}</small>
+              </>
+            ) : (
+              formatAuditableDuration(row.duration_ms, locale)
+            ),
+          sortValue: (row) => row.duration_ms,
+          align: "right",
+          footer: formatAuditableDuration(durationTotal, locale),
+          hidden: !show((row) => row.duration_ms),
+        },
+        {
+          key: "agent",
+          label: locale === "pt-BR" ? "Agente" : "Agent",
+          render: (row) => (
+            <>
+              <strong>{row.agent_name}</strong>
+              <small>{`${row.run_kind === "run" ? (locale === "pt-BR" ? "Invocação do orquestrador" : "Orchestrator invocation") : locale === "pt-BR" ? "Invocação delegada" : "Delegated invocation"} · ${row.run_purpose}`}</small>
+            </>
+          ),
+        },
+        {
+          key: "model",
+          label: "Modelo",
+          render: (row) => {
+            const presentation = agentRunModelPresentation(row);
+            return presentation.detail === "-" ? (
+              <strong>{presentation.primary}</strong>
+            ) : (
+              <>
+                <strong>{presentation.primary}</strong>
+                <small>{presentation.detail}</small>
+              </>
+            );
+          },
+        },
+        {
+          key: "effort",
+          label: locale === "pt-BR" ? "Esforço" : "Effort",
+          render: (row) =>
+            formatReasoningEffort(row.effective_reasoning_effort, row.reasoning_effort, locale),
+        },
+        {
+          key: "speed",
+          label: locale === "pt-BR" ? "Velocidade" : "Speed",
+          render: (row) => formatServiceTier(row.service_tier, locale),
+        },
+        {
+          key: "inputTokens",
+          label: locale === "pt-BR" ? "Tokens entrada" : "Input tokens",
+          render: (row) => formatAuditableNumber(row.input_tokens, locale),
+          sortValue: (row) => row.input_tokens,
+          align: "right",
+          footer: formatAuditableNumber(total("input_tokens"), locale),
+          hidden: !show((row) => row.input_tokens),
+        },
+        {
+          key: "cachedInputTokens",
+          label: locale === "pt-BR" ? "Tokens cache" : "Cached tokens",
+          render: (row) => formatAuditableNumber(row.cached_input_tokens, locale),
+          sortValue: (row) => row.cached_input_tokens,
+          align: "right",
+          footer: formatAuditableNumber(total("cached_input_tokens"), locale),
+          hidden: !show((row) => row.cached_input_tokens),
+        },
+        {
+          key: "uncachedInputTokens",
+          label: locale === "pt-BR" ? "Entrada sem cache" : "Uncached input",
+          render: (row) => formatAuditableNumber(row.uncached_input_tokens, locale),
+          sortValue: (row) => row.uncached_input_tokens,
+          align: "right",
+          footer: formatAuditableNumber(total("uncached_input_tokens"), locale),
+          hidden: !show((row) => row.uncached_input_tokens),
+        },
+        {
+          key: "outputTokens",
+          label: locale === "pt-BR" ? "Tokens saída" : "Output tokens",
+          render: (row) => formatAuditableNumber(row.output_tokens, locale),
+          sortValue: (row) => row.output_tokens,
+          align: "right",
+          footer: formatAuditableNumber(total("output_tokens"), locale),
+          hidden: !show((row) => row.output_tokens),
+        },
+        {
+          key: "reasoningTokens",
+          label: locale === "pt-BR" ? "Tokens raciocínio" : "Reasoning tokens",
+          render: (row) => formatAuditableNumber(row.reasoning_tokens, locale),
+          sortValue: (row) => row.reasoning_tokens,
+          align: "right",
+          footer: formatAuditableNumber(total("reasoning_tokens"), locale),
+          hidden: !show((row) => row.reasoning_tokens),
+        },
+        {
+          key: "visibleOutputTokens",
+          label: locale === "pt-BR" ? "Saída visível" : "Visible output",
+          render: (row) => formatAuditableNumber(row.visible_output_tokens, locale),
+          sortValue: (row) => row.visible_output_tokens,
+          align: "right",
+          footer: formatAuditableNumber(total("visible_output_tokens"), locale),
+          hidden: !show((row) => row.visible_output_tokens),
+        },
+        {
+          key: "totalTokens",
+          label: locale === "pt-BR" ? "Total tokens" : "Total tokens",
+          render: (row) =>
+            formatAuditableNumber(
+              row.input_tokens !== null && row.output_tokens !== null
+                ? row.input_tokens + row.output_tokens
+                : row.total_tokens,
+              locale,
+            ),
+          sortValue: (row) =>
+            row.input_tokens !== null && row.output_tokens !== null
+              ? row.input_tokens + row.output_tokens
+              : row.total_tokens,
+          align: "right",
+          footer: formatAuditableNumber(total("total_tokens"), locale),
+          hidden: !show((row) => row.total_tokens),
+        },
+        {
+          key: "inputRate",
+          label: "USD/M entrada",
+          render: (row) => formatRate(row.input_rate_usd_per_million, locale),
+          align: "right",
+          hidden: !show((row) => row.input_rate_usd_per_million),
+        },
+        {
+          key: "cacheRate",
+          label: "USD/M cache",
+          render: (row) => formatRate(row.cached_input_rate_usd_per_million, locale),
+          align: "right",
+          hidden: !show((row) => row.cached_input_rate_usd_per_million),
+        },
+        {
+          key: "outputRate",
+          label: "USD/M saída",
+          render: (row) => formatRate(row.output_rate_usd_per_million, locale),
+          align: "right",
+          hidden: !show((row) => row.output_rate_usd_per_million),
+        },
+        {
+          key: "reasoningRate",
+          label: "USD/M raciocínio",
+          render: (row) => formatRate(row.reasoning_rate_usd_per_million, locale),
+          align: "right",
+          hidden: !show((row) => row.reasoning_rate_usd_per_million),
+        },
+        {
+          key: "contextMultiplier",
+          label: "Mult. contexto E/S",
+          description: localizedDescription(
+            locale,
+            "Multiplicadores aplicados aos segmentos de uso desta Invocação de Agente quando o limite de contexto do modelo é ultrapassado. O total da invocação agrega os segmentos sem expor cada Chamada LLM.",
+            "Multipliers applied to this Agent Invocation's usage segments when the model context limit is exceeded. The invocation total aggregates segments without exposing each LLM Call.",
+          ),
+          render: (row) =>
+            formatMultiplierPair(
+              row.context_input_multiplier,
+              row.context_output_multiplier,
+              locale,
+            ),
+          align: "right",
+          hidden: !show((row) => row.context_input_multiplier),
+        },
+        {
+          key: "speedMultiplier",
+          label: locale === "pt-BR" ? "Cenário velocidade API" : "API speed scenario",
+          description: localizedDescription(
+            locale,
+            "Cenário de preço efetivo observado nesta Invocação de Agente. Priority/Fast pode elevar as tarifas em relação ao cenário Standard.",
+            "Effective pricing scenario observed in this Agent Invocation. Priority/Fast may increase rates compared with the Standard scenario.",
+          ),
+          render: (row) => formatApiSpeedScenario(row.service_tier, locale),
+          align: "right",
+          hidden: !show((row) => row.service_tier),
+        },
+        {
+          key: "inputCost",
+          label: "USD entrada",
+          render: (row) => formatUsd(row.input_cost_usd, locale),
+          align: "right",
+          footer: formatUsd(total("input_cost_usd"), locale),
+          hidden: !show((row) => row.input_cost_usd),
+        },
+        {
+          key: "cacheCost",
+          label: "USD cache",
+          render: (row) => formatUsd(row.cached_input_cost_usd, locale),
+          align: "right",
+          footer: formatUsd(total("cached_input_cost_usd"), locale),
+          hidden: !show((row) => row.cached_input_cost_usd),
+        },
+        {
+          key: "outputCost",
+          label: "USD saída",
+          render: (row) => formatUsd(row.output_cost_usd, locale),
+          align: "right",
+          footer: formatUsd(total("output_cost_usd"), locale),
+          hidden: !show((row) => row.output_cost_usd),
+        },
+        {
+          key: "reasoningCost",
+          label: "USD raciocínio",
+          render: (row) => formatUsd(row.reasoning_cost_usd, locale),
+          align: "right",
+          footer: formatUsd(total("reasoning_cost_usd"), locale),
+          hidden: !show((row) => row.reasoning_cost_usd),
+        },
+        {
+          key: "standardCost",
+          label: "USD padrão",
+          render: (row) => formatUsd(row.standard_cost_usd, locale),
+          align: "right",
+          footer: formatUsd(total("standard_cost_usd"), locale),
+          hidden: !show((row) => row.standard_cost_usd),
+        },
+        {
+          key: "speedUplift",
+          label: "USD acréscimo rápido",
+          description: localizedDescription(
+            locale,
+            "Parcela adicional causada pela velocidade Priority/Fast. Este valor já está incluído no custo efetivo e no total; é exibido separadamente apenas para auditoria.",
+            "Additional amount caused by Priority/Fast speed. This value is already included in the effective cost and total; it is shown separately for auditing only.",
+          ),
+          render: (row) => formatUsd(row.speed_uplift_usd, locale),
+          align: "right",
+          footer: formatUsd(total("speed_uplift_usd"), locale),
+          hidden: !show((row) => row.speed_uplift_usd),
+        },
+        {
+          key: "finalUsd",
+          label: locale === "pt-BR" ? "USD estimado API" : "Estimated API USD",
+          render: (row) => formatUsd(row.estimated_usd, locale),
+          align: "right",
+          footer: formatUsd(total("estimated_usd"), locale),
+          hidden: !show((row) => row.estimated_usd),
+        },
+        {
+          key: "fxRate",
+          label: locale === "pt-BR" ? "Cotação atual" : "Current exchange rate",
+          render: (row) => formatBrlRate(row.fx_rate, locale),
+          align: "right",
+          hidden: !show((row) => row.fx_rate),
+        },
+        {
+          key: "recordedFxRate",
+          label: locale === "pt-BR" ? "Cotação no período" : "Period exchange rate",
+          render: (row) => formatBrlRate(row.recorded_fx_rate, locale),
+          align: "right",
+          hidden: !show((row) => row.recorded_fx_rate),
+        },
+        {
+          key: "recordedBrl",
+          label: locale === "pt-BR" ? "Custo Final no Período" : "Period final cost",
+          render: (row) => formatAuditableCurrency(row.recorded_brl, "BRL", locale),
+          align: "right",
+          footer: formatAuditableCurrency(total("recorded_brl"), "BRL", locale),
+          hidden: !show((row) => row.recorded_brl),
+        },
+        {
+          key: "cost",
+          label: locale === "pt-BR" ? "Custo Final atual" : "Current final cost",
+          render: (row) => {
+            const value = currency === "BRL" ? row.estimated_brl : row.estimated_usd;
+            return formatAuditableCurrency(value, currency, locale);
+          },
+          sortValue: (row) => sortCostValue(currency, row.estimated_brl, row.estimated_usd),
+          align: "right",
+          footer: formatAuditableCurrency(
+            total(currency === "BRL" ? "estimated_brl" : "estimated_usd"),
+            currency,
+            locale,
+          ),
+          hidden: !show((row) => (currency === "BRL" ? row.estimated_brl : row.estimated_usd)),
+        },
+        {
+          key: "trace",
+          label: "",
+          render: (row) => (
+            <button
+              aria-label="Abrir detalhes da invocação"
+              className="cost-row-action"
+              onClick={(event) => {
+                event.stopPropagation();
+                onOpenRun(row.run_id);
+              }}
+              type="button"
+            >
+              <MoreVerticalIcon />
+            </button>
+          ),
+        },
+      ]}
+      locale={locale}
+      pageSize={100}
+      rowKey={(row) => row.run_id}
+      onRowClick={(row) => onOpenRun(row.run_id)}
+      rows={rows}
+      scrollLabel={costRunsScrollLabel(locale)}
+      showColumnInfo
+      sortable
+    />
+  );
+}
+
+export function costRunsDurationTotal(rows: readonly CostRunRow[]): number | null {
+  return sumNumbers(durationContributors(rows).map((row) => row.duration_ms));
+}
+
+export function isCompactRunColumnVisible(
+  rows: readonly CostRunRow[],
+  select: (row: CostRunRow) => number | string | null,
+): boolean {
+  return rows.some((row) => {
+    const value = select(row);
+    return value !== null && value !== 0 && value !== "";
+  });
+}
+
+export function formatRate(value: number | null, locale: CostLocale): string {
+  if (value === null) return unavailableMetricLabel(locale);
+  return new Intl.NumberFormat(locale, {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+  }).format(value);
+}
+
+export function formatBrlRate(value: number | null, locale: CostLocale): string {
+  if (value === null) return unavailableMetricLabel(locale);
+  return `R$ ${new Intl.NumberFormat(locale, {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+  }).format(value)}`;
+}
+
+export function formatUsd(value: number | null, locale: CostLocale): string {
+  if (value === null) return unavailableMetricLabel(locale);
+  return new Intl.NumberFormat(locale, {
+    style: "currency",
+    currency: "USD",
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+  }).format(value);
+}
+
+function formatMultiplier(value: number | null, locale: CostLocale): string {
+  return value === null
+    ? unavailableMetricLabel(locale)
+    : `${value.toLocaleString("en-US", { maximumFractionDigits: 3 })}×`;
+}
+
+export function formatMultiplierPair(
+  input: number | null,
+  output: number | null,
+  locale: CostLocale,
+): string {
+  if (input === null || output === null) return unavailableMetricLabel(locale);
+  return `${formatMultiplier(input, locale)} / ${formatMultiplier(output, locale)}`;
+}
+
+function formatRuntimeDetail(
+  value: string | null,
+  kind: "effort" | "speed",
+  locale: CostLocale,
+): string {
+  if (value === null || value.trim() === "" || value.trim().toLowerCase() === "unknown") return "-";
+  if (locale !== "pt-BR") return value;
+  const labels: Record<string, string> = {
+    low: "Leve",
+    medium: "Médio",
+    high: "Alto",
+    xhigh: "Extra alto",
+    max: "Ultra",
+    default: kind === "speed" ? "Padrão" : "Padrão",
+    priority: "Rápido",
+  };
+  return labels[value] ?? value;
+}
+
+export function formatReasoningEffort(
+  effective: string | null,
+  requested: string | null,
+  locale: CostLocale,
+): string {
+  const effectiveValue = normalizedRuntimeValue(effective);
+  if (effectiveValue !== null) return formatRuntimeDetail(effectiveValue, "effort", locale);
+  const requestedValue = normalizedRuntimeValue(requested);
+  if (requestedValue === null) return "-";
+  const formatted = formatRuntimeDetail(requestedValue, "effort", locale);
+  return locale === "pt-BR"
+    ? `${formatted} (solicitado; efetivo -)`
+    : `${formatted} (requested; effective -)`;
+}
+
+export function formatServiceTier(value: string | null, locale: CostLocale): string {
+  const normalized = normalizedRuntimeValue(value);
+  if (normalized === null) return locale === "pt-BR" ? "Padrão" : "Standard";
+  return formatRuntimeDetail(normalized, "speed", locale);
+}
+
+function normalizedRuntimeValue(value: string | null): string | null {
+  const normalized = value?.trim() ?? "";
+  return normalized === "" || normalized.toLowerCase() === "unknown" ? null : normalized;
+}
+
+export function costRunsScrollLabel(locale: CostLocale): string {
+  return locale === "pt-BR"
+    ? "Tabela de custos por invocação com rolagem horizontal"
+    : "Agent invocation costs table with horizontal scrolling";
+}
+
+export function costGroupsScrollLabel(locale: CostLocale): string {
+  return locale === "pt-BR"
+    ? "Tabela de custos agrupados com rolagem horizontal"
+    : "Grouped costs table with horizontal scrolling";
+}
+
+export function formatDateTime(value: string, locale: CostLocale): string {
+  if (!value || Number.isNaN(Date.parse(value))) return "—";
+  return new Intl.DateTimeFormat(locale, {
+    dateStyle: "short",
+    timeStyle: "medium",
+  }).format(new Date(value));
+}
+
+export function formatCostPeriodLabel(
+  value: string,
+  period: "daily" | "monthly" | "annual",
+  locale: CostLocale,
+): string {
+  if (period === "annual") return value.slice(0, 4);
+  if (period === "monthly") return value.slice(0, 7);
+  const date = new Date(`${value}T12:00:00.000Z`);
+  if (Number.isNaN(date.getTime())) return value;
+  return new Intl.DateTimeFormat(locale, { dateStyle: "short", timeZone: "UTC" }).format(date);
+}
+
+export function costPeriodTotalAriaLabel({
+  locale,
+  duration,
+  tokens,
+  cost,
+  currency,
+}: {
+  locale: CostLocale;
+  duration: string;
+  tokens: string;
+  cost: string;
+  currency: CostCurrency;
+}): string {
+  return locale === "pt-BR"
+    ? `Total geral — Tempo: ${duration}; Tokens: ${tokens}; ${currency}: ${cost}`
+    : `Grand total — Time: ${duration}; Tokens: ${tokens}; Cost (${currency}): ${cost}`;
+}
+
+export function CostGroupsTable({
+  rows,
+  currency,
+  locale,
+  onOpenTrace,
+  period,
+  showDateTime = true,
+  dateHeading,
+  labelHeading,
+}: {
+  rows: readonly CostGroupRow[];
+  currency: CostCurrency;
+  locale: CostLocale;
+  onOpenTrace?: (taskId: string) => void;
+  period?: "daily" | "monthly" | "annual";
+  showDateTime?: boolean;
+  dateHeading?: string;
+  labelHeading?: string;
+}) {
+  const totals = {
+    runs: rows.reduce((sum, row) => sum + row.run_count, 0),
+    tasks: rows.reduce(
+      (sum, row) =>
+        sum +
+        (period === undefined
+          ? row.task_count
+          : (row.taskDaysActive ?? row.tasksActive ?? row.task_count)),
+      0,
+    ),
+    prds: rows.reduce((sum, row) => sum + row.prd_count, 0),
+    specs: rows.reduce((sum, row) => sum + row.spec_count, 0),
+    evidences: rows.reduce((sum, row) => sum + row.evidence_count, 0),
+    tests: rows.reduce((sum, row) => sum + row.test_count, 0),
+    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 totalDurationDisplay = !totals.durationPartial
+    ? formatAuditableDuration(totals.durationKnownMs, locale)
+    : totals.durationKnownMs === 0
+      ? unavailableMetricLabel(locale)
+      : formatDurationMs(totals.durationKnownMs, locale);
+  const totalTokensDisplay = formatAuditableCompactNumber(totals.tokens, locale);
+  const totalCostDisplay = formatAuditableCurrency(
+    currency === "BRL" ? totals.brl : totals.usd,
+    currency,
+    locale,
+  );
+  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,
+        },
+        {
+          key: "label",
+          label:
+            period === undefined
+              ? (labelHeading ?? (locale === "pt-BR" ? "Grupo" : "Group"))
+              : locale === "pt-BR"
+                ? "Período"
+                : "Period",
+          render: (row) =>
+            period === undefined ? (
+              <>
+                <strong>{row.label}</strong>
+                {row.key === row.label ? null : <small>{row.key}</small>}
+              </>
+            ) : (
+              <strong>{formatCostPeriodLabel(row.key, period, locale)}</strong>
+            ),
+          sortValue: (row) => row.key,
+          footer: showDateTime ? undefined : <output aria-label={totalLabel}>Total</output>,
+        },
+        {
+          key: "runs",
+          label: locale === "pt-BR" ? "Invocações" : "Agent invocations",
+          render: (row) => row.run_count,
+          align: "right",
+          footer: totals.runs,
+        },
+        {
+          key: "tasks",
+          label:
+            period === undefined
+              ? locale === "pt-BR"
+                ? "Tarefas ativas"
+                : "Active tasks"
+              : locale === "pt-BR"
+                ? "Dias-tarefa ativos"
+                : "Active task-days",
+          render: (row) =>
+            period === undefined
+              ? row.task_count
+              : (row.taskDaysActive ?? row.tasksActive ?? row.task_count),
+          align: "right",
+          footer: totals.tasks,
+        },
+        ...(period === undefined
+          ? []
+          : [
+              {
+                key: "prds",
+                label: "PRDs",
+                render: (row: CostGroupRow) => row.prd_count,
+                align: "right" as const,
+                footer: totals.prds,
+              },
+              {
+                key: "specs",
+                label: "SPECs",
+                render: (row: CostGroupRow) => row.spec_count,
+                align: "right" as const,
+                footer: totals.specs,
+              },
+              {
+                key: "evidences",
+                label: locale === "pt-BR" ? "Evidências" : "Evidence",
+                render: (row: CostGroupRow) => row.evidence_count,
+                align: "right" as const,
+                footer: totals.evidences,
+              },
+              {
+                key: "tests",
+                label: "Tests",
+                render: (row: CostGroupRow) => row.test_count,
+                align: "right" as const,
+                footer: totals.tests,
+              },
+            ]),
+        {
+          key: "duration",
+          label: "Tempo",
+          render: (row) => formatDurationCoverage(row.duration, locale),
+          sortValue: (row) => (row.duration.coverage_ratio > 0 ? row.duration.known_sum : null),
+          align: "right",
+          footer: <output aria-label={totalAriaLabel}>{totalDurationDisplay}</output>,
+        },
+        {
+          key: "tokens",
+          label: "Tokens",
+          render: (row) => formatAuditableCompactNumber(row.total_tokens, locale),
+          sortValue: (row) => row.total_tokens,
+          align: "right",
+          footer: <output aria-label={totalAriaLabel}>{totalTokensDisplay}</output>,
+        },
+        {
+          key: "cost",
+          label: locale === "pt-BR" ? "Custo" : "Cost",
+          render: (row) =>
+            formatAuditableCurrency(
+              currency === "BRL" ? row.estimated_brl : row.estimated_usd,
+              currency,
+              locale,
+            ),
+          sortValue: (row) => 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={period === undefined ? null : { key: "label", direction: "desc" }}
+      locale={locale}
+      pageSize={100}
+      rowKey={(row) => row.key}
+      onRowClick={onOpenTrace === undefined ? undefined : (row) => onOpenTrace(row.key)}
+      rows={rows}
+      scrollLabel={costGroupsScrollLabel(locale)}
+      showColumnInfo
+      sortable
+    />
+  );
+}